Vývojový diagram – porovnání grafických formátů

Teď zkusím porovnat různé grafické formáty pro složitější grafiku s ostrými hranami. Pro tento účel jsem si vypůjčil z Wikipedie ukázku vývojového diagramu.

Charakter obrázku stále nahrává vektorovému formátu, ale s rostoucím počtem grafických prvků roste složitost jeho zápisu a s ní i délka souboru. Na rastrových formátech se složitost obrázku až tolik neprojeví, u nich mají dopad na velikost souboru zejména rozměry.

Obsahuje-li obrázek větší množství textu, jako na příklad zde, vyvstává ve formátu SVG problém, protože dané písmo nemusí být v uživatelově zařízení k dispozici. Sázkou na jistotu je převést text na křivky, tedy udělat z písmen jejich „obrázky“. Písmo pak už není potřeba a máte jistotu, že obrázek bude vykreslen přesně tak, jak jej vidíte. Ale velikost souboru znatelně vzroste a text už nadále není editovatelný.

Pokud text necháte v textové podobě a použité písmo nemá uživatelův prohlížeč k dispozici, použije nějaké náhradní. To nemusí mít stejné rozměry ani vzhled a výsledná podoba obrázku může dost utrpět. V ukázkách níže najdete obě varianty. Ta s textem převedeným na křivky je 2,5krát větší. Použil jsem písmo Roboto. Pokud je nemáte instalováno, může vypadat všelijak.

V SVG lze teoreticky využívat webová písma pomocí @font-face, klient si potřebné písmo stáhne. Grafické editory ale takovou možnost moc nepodporují. Pokud byste ji chtěli využít, bude potřeba SVG ručně upravit a odkaz na webové písmo do něj přidat. Pokud možno s využitím local(), aby se přednostně využilo lokální systémové písmo, pokud je k dispozici.

Výhoda ostrosti SVG proti rastrovým formátům se tu samozřejmě projevuje, u textů je obzvlášť patrná. Všimněte si, jak kvůli antialiasingu hran vypadají texty v rastrových formátech tučnější. JPEG ze srovnání samozřejmě nevychází dobře, jeho soubory jsou velké a hrany rozpité. Pro tento typ obrázků zkrátka nebyl vytvořen.

SVG, písmo převedeno na křivky: 32 426 B

SVG, písmo ponecháno: 12 645 B

PNG plnobarevné: 36 932 B

PNG 32 barev: 16 308 B

JPEG 60 %: 64 789 B

JPEG 30 %: 40 704 B