Začnite štruktúrou dokumentu
SVG je jazyk vektorovej grafiky založený na XML. Koreňový prvok svg môže obsahovať tvary, cesty, text, skupiny a atribúty meniace výsledný obrázok. Nižšie uvedený príklad má viewBox 40 × 40 a kruh so stredom 20,20 a polomerom 12. ViewBox vytvára súradnicovú sústavu, no neurčuje šírku 40 CSS pixelov na stránke. Keďže ide o XML, záleží na vnorení prvkov aj úvodzovkách pri atribútoch. Všeobecný formátovač XML pomôže čítať štruktúru, zatiaľ čo nástroj SVG navyše kontroluje koreň svg. Pre obrázok SVG zvoľte jeho vlastný formátovač.
Formátujte na čítanie, minifikujte kópiu
Formátovač doplní odsadenie a zlomy riadkov, takže kruh, jeho výplň a viewBox skontrolujete oddelene. Hodí sa pri úpravách aj revízii. Minifikátor SVG vytvára kompaktnejší text na zverejnenie súboru; nie je to kompresor obrázka, ktorý optimalizuje dráhy alebo navrhuje iný motív. Originálny zdroj si nechajte a oba výsledky porovnajte v skutočnom vykresľovači. Kratší reťazec sám nedokazuje totožné zobrazenie každej nezvyčajnej funkcie SVG, najmä pri obmedzenej podpore parsera. Ak nástroj oznámi chybu, preskúmajte vstup namiesto hádania chýbajúceho XML.
- SVG XML s viewBox a kruhom
- formátovať na kontrolu štruktúry
- minifikovať kópiu → porovnať obrázok
Zachovajte aj neviditeľný význam
Schéma môže obsahovať text, popisky alebo názov potrebný čitateľom a asistenčným technológiám. Nevymažte ich len kvôli úspore bajtov. SVG tiež umožňuje štýly, odkazy, animáciu a skripty, preto formátovanie nie je očistenie nedôveryhodného súboru. Ak grafika prišla zvonka, pred vložením do stránky použite vhodnú bezpečnostnú kontrolu a sanitizáciu. Ukážkový kruh je zámerne jednoduchý: vysvetľuje štruktúru bez sľubu, že malý formátovač pokryje všetko SVG. Po úprave porovnajte obrázok, rozmery aj textové alternatívy.
Skontrolujte súradnice a vloženie
Ak je SVG malé, orezané alebo prázdne, najprv pozrite viewBox. Jeho štyri čísla opisujú viditeľný obdĺžnik; tvar mimo neho sa nemusí ukázať, hoci XML je platné. Potom skontrolujte šírku a výšku v mieste vloženia, pretože zobrazenie môže riadiť CSS. Viditeľnosť ovplyvňuje aj výplň a obrys. Formátovanie nemá meniť zamýšľané súradnice a kompaktnejší súbor porovnajte pri rovnakých štýloch stránky ako originál. Dôležitý obrázok otvorte samostatne aj v skutočnom kontexte webu.
Postupujte s overením
Vložte malé reprezentatívne SVG do formátovača nižšie a overte čitateľnú štruktúru. Ak máte XML, ktoré nie je SVG obrázkom, zvoľte nástroj XML. Po revízii skopírujte obsah do minifikátora SVG, zachovajte oba varianty a porovnajte ich v prehliadači pri rôznych rozmeroch. Skontrolujte prípadné textové alternatívy a interakcie. Až potom nahraďte zverejnený súbor. Prevod prebieha v prehliadači, ale verejne vložený predvyplnený príklad odhalí vstup vo fragmente URL; nezverejňujte súkromný zdroj. Uprataný kód uľahčí kontrolu, nenahradí skúšku vykreslenia.
Pri ikonách skúste svetlé aj tmavé pozadie, pretože výplň zhodná s pozadím môže vytvoriť dojem prázdneho súboru. Pozrite grafiku pri veľkom priblížení a pri malej veľkosti použitia. Vektorový formát dovolí plynulé škálovanie tvarov, no tenké čiary, drobný text a slabý kontrast môžu zostať nečitateľné. Ak je obrázok nositeľom informácie, overte aj názov alebo alternatívny text v skutočnom HTML, v ktorom sa zobrazí. Textová minifikácia tieto otázky nevyrieši.