Začněte strukturou dokumentu
SVG je jazyk vektorové grafiky založený na XML. Kořenový prvek svg může obsahovat tvary, cesty, texty, skupiny a atributy ovlivňující obrázek. Níže uvedený příklad má viewBox 40 × 40 a kruh se středem 20,20 a poloměrem 12. ViewBox vytváří souřadnice; neznamená šířku 40 CSS pixelů na stránce. Protože jde o XML, záleží na vnoření prvků a uvozovkách u atributů. Obecný formátovač XML pomůže číst strukturu, zatímco nástroj SVG navíc kontroluje kořen svg. Pro obrázek SVG použijte jeho vlastní formátovač.
Formátujte pro čtení, minifikujte kopii
Formátovač doplní odsazení a konce řádků, takže kruh, výplň a viewBox zkontrolujete odděleně. Hodí se při úpravách i revizi. Minifikátor SVG připravuje stručnější text pro zveřejněný soubor; není to obrazový kompresor, který optimalizuje cesty nebo navrhuje jinou kresbu. Původní zdroj ponechte a výsledky porovnejte ve skutečném vykreslovači. Kratší řetězec nedokazuje totožné zobrazení každé méně běžné funkce SVG, zejména když má nástroj omezený parser. Jestliže ohlásí chybu, prozkoumejte vstup místo hádání chybějícího XML.
- SVG XML s viewBox a kruhem
- formátovat pro kontrolu struktury
- minifikovat kopii → porovnat obraz
Zachovejte i neviditelný význam
Schéma může obsahovat text, popisky nebo název důležitý pro čtenáře a asistenční technologie. Nemažte je jen kvůli menší velikosti. SVG dovoluje také styly, odkazy, animace a skripty, proto formátování není očištěním nedůvěryhodného souboru. Pochází-li grafika z cizího zdroje, před vložením na stránku použijte vhodnou bezpečnostní kontrolu a sanitizaci. Ukázkový kruh je záměrně jednoduchý: vysvětluje strukturu bez příslibu, že malý formátovač zvládne celé SVG. Po úpravě porovnejte obraz, rozměry i textové alternativy.
Prověřte souřadnice a vložení
Pokud je SVG malé, oříznuté nebo prázdné, nejprve se podívejte na viewBox. Jeho čtyři čísla popisují viditelný obdélník; tvar mimo něj se nemusí ukázat, byť je XML platné. Potom zkontrolujte šířku a výšku v místě vložení, protože výslednou velikost může řídit CSS. Viditelnost ovlivňuje i výplň a obrys. Formátování nemá změnit zamýšlené souřadnice a kratší soubor porovnejte při stejných stylech stránky jako originál. Důležitou grafiku otevřete samostatně i v jejím skutečném webovém kontextu.
Postupujte s ověřováním
Vložte malé reprezentativní SVG do formátovače níže a prověřte čitelnou strukturu. Jde-li o XML, které není obrázkem SVG, zvolte nástroj XML. Po revizi přeneste kopii do minifikátoru SVG, zachovejte obě verze a porovnejte je v prohlížeči při více velikostech. Ověřte případné textové alternativy a interakce. Teprve potom nahraďte zveřejněný soubor. Převod se děje v prohlížeči, ale veřejně vložený předvyplněný příklad zpřístupní vstup ve fragmentu URL; nezveřejňujte soukromý zdroj. Uspořádaný kód usnadňuje kontrolu, nenahrazuje zkoušku zobrazení.
U ikon zkuste světlé i tmavé pozadí, protože výplň splývající s pozadím může budit dojem prázdného souboru. Prohlédněte grafiku při velkém přiblížení i v malé skutečně používané velikosti. Vektorový formát umožňuje plynulé škálování tvarů, ale tenké čáry, drobný text a slabý kontrast mohou zůstat nečitelné. Nese-li obrázek informaci, ověřte rovněž název nebo alternativní text v reálném HTML, které ho zobrazuje. Textová minifikace tyto otázky neřeší.