Pliki SVG (Scalable Vector Graphics) w dobie wszechobecnych smartfonów i innych urządzeń o ekranach z wysokim ppi powinny być standardem, ale nadal ze świecą szukać przykładów ich zastosowania w komercyjnych produktach. Po części jest to wina mało świadomych deweloperów, nadal bardzo popularny jest mit o słabym wsparciu dla SVG. Jeżeli zależy nam na wsparciu IE8 nic(?) nie stoi na przeszkodzie by zainteresować się np. SVGeezy.

Z mojego doświadczenia wynika, że plik SVG, w zależności od tego jak bardzo jest złożony, może być zawsze zmniejszony o kilkadziesiąt procent. Dla ikony złożonej z 5-6 elementów jest to nawet 60-70%. Jak to możliwe?

(Nie)czysty SVG

Winna leży po stronie edytorów. Za przykład weźmy opensourcowy Inkscape i logo WEBroad. Ikona 60×64 w formacie Inkscape SVG to 3 850b.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="64px"
   height="64px"
   id="svg3054"
   version="1.1"
   inkscape:version="0.48.4 r9939"
   sodipodi:docname="Nowy dokument 6">
  <defs
     id="defs3056" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="11"
     inkscape:cx="42.030106"
     inkscape:cy="31.8742"
     inkscape:current-layer="layer1"
     showgrid="true"
     inkscape:document-units="px"
     inkscape:grid-bbox="true"
     inkscape:window-width="1920"
     inkscape:window-height="1057"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata3059">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1"
     inkscape:label="Layer 1"
     inkscape:groupmode="layer">
    <path
       style="fill:#d70000;fill-opacity:1;fill-rule:evenodd;stroke:none"
       d="M 2.1469587,19.144324 C 2.7477757,10.064402 40.327302,-1.025797 46.893937,2.76281 c 6.93892,5.073804 18.16498,36.910875 14.32665,44.200722 -4.4077,8.288616 -39.727128,18.061036 -44.431678,14.14586 C 11.651025,57.672471 0.60066671,28.805927 2.1469587,19.144324 z"
       id="rect3003"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccc" />
    <path
       style="fill:#eca702;fill-opacity:1;fill-rule:evenodd;stroke:none"
       d="M 7.5618827,16.138311 C 8.7573597,9.826203 35.691092,6.488753 39.970685,9.714543 c 4.311072,3.236788 8.631942,27.022469 5.319912,31.79869 -2.5923,5.18506 -29.120743,8.356652 -32.084354,5.203852 C 9.8981077,43.861842 5.6540957,22.775996 7.5618827,16.138311 z"
       id="rect3003-7"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccc" />
    <path
       style="fill:#fff600;fill-opacity:1;fill-rule:evenodd;stroke:none"
       d="m 12.154016,15.047001 c 1.546443,-3.897751 19.269113,-3.64943 21.615229,-1.042245 2.327917,3.224683 3.085727,18.458081 0.371593,21.104558 -3.105071,3.002803 -19.631471,2.67902 -21.142643,0.284206 -1.768887,-2.247307 -2.887667,-16.329572 -0.844179,-20.346519 z"
       id="rect3003-4"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccc" />
    <path
       style="fill:#fffcb2;fill-opacity:1;fill-rule:evenodd;stroke:none"
       d="m 20.268697,14.869558 c 0.940881,-2.371453 11.613036,-1.927403 13.040449,-0.341156 1.416346,1.961955 1.401857,11.219206 -0.249464,12.829367 -1.889183,1.826956 -11.800652,1.082429 -12.720083,-0.374616 -1.076223,-1.367296 -1.314195,-9.669619 -0.0709,-12.1136 z"
       id="rect3003-0"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cccccc" />
    <path
       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
       d="m 20.360518,18.993825 c 0.702033,-1.378086 6.496464,-0.941347 7.288573,-0.0914 0.789611,1.054615 0.760123,6.163816 -0.123789,7.056318 -1.011375,1.012818 -6.596724,0.698008 -7.111029,-0.08647 -0.598837,-0.734112 -0.707659,-5.535884 -0.05376,-6.878451 z"
       id="rect3003-9"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cccccc" />
  </g>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg

xmlns:dc="http://purl.org/dc/elements/1.1/"

xmlns:cc="http://creativecommons.org/ns#"

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:svg="http://www.w3.org/2000/svg"

xmlns="http://www.w3.org/2000/svg"

xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"

xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

width="64px"

height="64px"

id="svg3054"

version="1.1"

inkscape:version="0.48.4 r9939"

sodipodi:docname="Nowy dokument 6">

<defs

id="defs3056" />

<sodipodi:namedview

id="base"

pagecolor="#ffffff"

bordercolor="#666666"

borderopacity="1.0"

inkscape:pageopacity="0.0"

inkscape:pageshadow="2"

inkscape:zoom="11"

inkscape:cx="42.030106"

inkscape:cy="31.8742"

inkscape:current-layer="layer1"

showgrid="true"

inkscape:document-units="px"

inkscape:grid-bbox="true"

inkscape:window-width="1920"

inkscape:window-height="1057"

inkscape:window-x="-8"

inkscape:window-y="-8"

inkscape:window-maximized="1" />

<metadata

id="metadata3059">

<rdf:RDF>

<cc:Work

rdf:about="">

<dc:format>image/svg+xml</dc:format>

<dc:type

rdf:resource="http://purl.org/dc/dcmitype/StillImage" />

<dc:title></dc:title>

</cc:Work>

</rdf:RDF>

</metadata>

id="layer1"

inkscape:label="Layer 1"

inkscape:groupmode="layer">

<path

style="fill:#d70000;fill-opacity:1;fill-rule:evenodd;stroke:none"

d="M 2.1469587,19.144324 C 2.7477757,10.064402 40.327302,-1.025797 46.893937,2.76281 c 6.93892,5.073804 18.16498,36.910875 14.32665,44.200722 -4.4077,8.288616 -39.727128,18.061036 -44.431678,14.14586 C 11.651025,57.672471 0.60066671,28.805927 2.1469587,19.144324 z"

id="rect3003"