SVG na webu

Sdílet článek na Facebook
Sdílet článek na Twitter
Vkládání vektorové grafiky na web se v posledních letech stalo běžným standardem a je podporováno všemi moderními prohlížeči. Konečně z webu mizí původně vektorová loga, exportovaná do rastrového PNG. Kromě kvalitního vykreslení má formát SVG i další výhody - výbornou ovladatelnost pomocí Javascriptu i CSS stylů. Podíváme se na základní nastavení SVG pro použití na Vašem webu.
Sdílet článek na Facebook
Sdílet článek na Twitter

Vložení SVG do stránky je možné několika způsoby. Jako <img>, <object>, <iframe>, <div> nebo jako inline <svg>. Dle Vaší volby se pak samozřejmě liší vhodné nastavení stylů a atributů. Výborně je tento problém popsán na https://css-tricks.com. V zásadě je však nejdůležitější zavedení správného atributu viewBox samotného SVG. Pak se vložená grafika zvětšuje a zmenšuje tak, aby vyplnila svůj container dle jeho width a height.

1 Vkládání SVG

SVG layers

Při exportu SVG z Adobe Illustrator nebo Inkspace se atribut viewBox přidává automaticky. Během přípravy SVG je výhodné rozdělit obrázek na vrstvy a groups. V samotném kódu je toto rozdělení stále přehledné a pomůže Vám v orientaci. Pořadí vrstev a objektů je opačné než v Illustratoru a nejvzdálenější (nejníže položené) vrstvy se nachází přímo pod hlavičkou SVG a definovanými styly.


<svg version="1.1" id="massage" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-170 327.2 253.3 187.7" style="enable-background:new -170 327.2 253.3 187.7;" xml:space="preserve">
    <style type="text/css">
        .st0{fill:#80BE41;stroke:#231F20;stroke-width:2;stroke-miterlimit:10;}
        .st1{fill:#5BAA46;}
        .st2{fill:#E67925;stroke:#231F20;stroke-width:2;stroke-miterlimit:10;}
        .st3{fill:#8FD7F1;stroke:#231F20;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
        .st4{fill:none;stroke:#231F20;stroke-width:2;stroke-miterlimit:10;}
        .st5{fill:#FFFFFF;stroke:#231F20;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
    </style>
    <g id="ground_1_">
        <polygon id="grass" class="st0" points="77.1,435.4 -67.3,392.4 -157.3,464.9 -14.2,508.3 	"/>
        <path id="shadow" class="st1" d="M30.8,427.5v0.3c-0.1,0.6-0.3,1.1-0.8,1.5l-2.8,2.3l-28.9,23.2l0,0l-8.1,6.5l-35.6,28.5
            c-2,1.6-4.6,2.1-7,1.4l-1.5-0.4l-26.1-7.7l-19.8-5.9l-2.1-0.6c-1-0.3-1.5-1.2-1.6-2c0-0.6,0.2-1.3,0.8-1.8l75.6-60.6
            c1.9-1.5,4.4-2,6.7-1.3l49.7,14.6C30.3,425.8,30.8,426.6,30.8,427.5z"/>
    </g>
    <g id="table">
        <path id="XMLID_36_" class="st2" d="M34.9,351.8v0.4c-0.1,0.6-0.3,1.2-0.9,1.6l-3,2.4L0.3,380.8l0,0l-8.6,6.9L-46,418
            c-2.1,1.7-4.9,2.2-7.4,1.5L-55,419l-27.8-8.1l-21.1-6.2l-2.2-0.7c-1-0.3-1.6-1.2-1.7-2.2c0-0.7,0.3-1.4,0.9-1.9l80.2-64.4
            c2-1.6,4.7-2.1,7.1-1.4l52.8,15.5C34.4,350,34.9,350.9,34.9,351.8z"/>
        <path id="XMLID_19_" class="st3" d="M34.9,352.2v7.1c-0.1,0.6-0.3,1.1-0.9,1.6L-6,393l-1.9,1.5L-46,425.1c-2.1,1.7-4.9,2.2-7.4,1.5
            l-5.2-1.5l0,0l-20.5-6l-27-7.9c-1.1-0.3-1.7-1.3-1.7-2.2v-7.1c0,0.9,0.6,1.9,1.7,2.2l2.2,0.7l21.1,6.2l27.7,8.1l1.6,0.5
            c2.6,0.8,5.3,0.2,7.4-1.5l37.8-30.3l8.6-6.9l0,0l31-24.7l3-2.4C34.8,353.3,34.9,352.7,34.9,352.2z"/>
    </g>
    <g id="legs2">
        <polyline id="XMLID_15_" class="st4" points="-51.2,482 -68.9,442.2 -68.9,442.2 -79.1,419 	"/>
        <polyline id="XMLID_12_" class="st4" points="-58.6,425 -68.9,442.2 -68.9,442.2 -86.4,471.6 	"/>
    </g>
    <g id="legs1">
        <line id="XMLID_9_" class="st4" x1="11.1" y1="431.8" x2="-5.6" y2="393"/>
        <line id="XMLID_7_" class="st4" x1="-7.9" y1="394.7" x2="-23.7" y2="421.4"/>
    </g>
    <path id="blanket" class="st5" d="M-11.4,390.2c0,0,3.9,15.3,1.2,34.8c0,0,14.4-7.8,36.5-32.6c0,0,4.4-7.2,2.3-34"/>
    <polyline id="blanket-upper" class="st5" points="-73.8,373.5 -73.8,371.3 -11.4,390.2 28.6,358.4 -34.6,339.6 -73.8,371.3 "/>
</svg>
        

2 Přichystání SVG

Export SVG z Ai

SVG export SVG advanced export

Typ SVG 1.1 je nejspolehlivější volbou při ukládání souboru. Fonty je vhodné převádět na křivky, podobně jako při tisku. Podíváme se ještě na další nastavení při ukládání SVG v Illustratoru. Podrobný popis jednotlivých možností najdete případně na http://creativedroplets.com.

Při vkládání rastrových obrázků do SVG je možné vybrat mezi volbou embed, která vloží obrázek přímo do SVG (výrazně zvětší velikost souboru) a externím linkem (zde je však vhodné následně v kódu upravit cestu k využitému obrázku).

Pro nastavení CSS stylů je vhodné volit z možností Style Atributes a Presentation Atributes. Obě možnosti jsou pak vhodné pro web i další editaci kódu. Přesnost až na opravdu výjimečné případy nastavte na jedno desetinné místo. Rozdíl je na webu takřka neviditelný, výrazně ušetříte velikost souboru a usnadníte si zároveň práci při případné editaci kódu (např. při animacích).

3 Export SVG
4 Rozšířené nastavení

Špatné vykreslování na webu

Browser SVG bug SVG bug fix

Zvláštním problémem SVG při vykreslení na webu je chyba při vykreslení na sebe navazujících křivek. Při podrobném zkoumání navazujících křivek si lze všimnout, že se mezi nimi vykresluje černý či bílý pixel. Tato chyba je však snadno řešitelná pomocí překryvů těchto křivek a jejich následného vrstvení. Tím není narušen vzhled výsledné grafiky, ale zmíněná chyba zmizí.

5 Špatné vykreslení
6 Opravená verze

Díky své struktuře je formát SVG snadno upravitelný pomocí CSS stylů, včetně responzivních atributů media queries. Je tak možné z grafiky při zmenšení velikosti obrazovky postupně odebírat detaily. Stejně tak je jednoduché docílit například zbarvení části obrázku při najetí myší.


Stejně tak se SVG chová přátelsky i k Javascriptu. Minule jsme si řekli o komplexních animacích pomocí "Lottie.js", příště se podíváme na jednoduché a čisté animace pomocí "GSAP.js".

8 Responzivní SVG
9 Přejetí myší

< zpět