Exportovat vektorovou grafiku v programu Inkscape pro web

V tomto tutoriálu ti ukážu, jak uložit tvůj vytvořený vektorový obrázek ve formátu Scalable Vector Graphics (SVG). Soubory ve formátu SVG jsou obzvláště vhodné pro použití na internetu, protože potřebují málo místa a mohou být libovolně změnšeny nebo zvětšeny, aniž by ztratily na kvalitě. Ať už se jedná o firemní logo, ikonu nebo kresbu – poté, co si vytvoříš vektorový obrázek v programu Inkscape, se naučím ti, jak je správně uložit, aby tvá díla byla optimálně využita na webu.

Nejdůležitější poznatky

• Soubory SVG nabízejí vysokou škálovatelnost a malou velikost souboru.
• Inkscape ukládá vektorové obrázky ve formátu SVG, který obsahuje speciální informace o vrstvách a vodících čarách.
• Existují různé typy souborů SVG: nativní SVG v Inkscape a optimalizované SVG, které jsou vhodnější pro web.

Krok za krokem návod

Pro uložení vektorového obrázku ve formátu SVG postupuj následovně:

Nejprve se ujisti, že je tvůj design v programu Inkscape dokončený. Pokud ano, klikni na Soubor v horní nabídce.

V rozevíracím menu pak vyber možnost Uložit jako. Tím se otevře nové okno, kde si můžeš vybrat umístění a typ souboru.

Výchozím formátem ukládání v programu Inkscape je jeho vlastní formát SVG, který obsahuje informace o vrstvách a struktuře tvého designu. Pro webové využití je však lepší použít optimalizovanou variantu. Najdi umístění na svém pevném disku, kam chceš soubor uložit.

V rozevíracím menu pro typ souboru zvol buď normální SVG nebo optimalizované SVG. Pro první pokus vyber normální SVG.

Souboru dej název, například Logo_normální, a potvrď tlačítkem Uložit. Tento soubor je nyní uložen ve formátu normálního SVG.

Zjistíš, že tento soubor má obvykle menší velikost než soubor ve formátu Inkscape SVG, který může mít velikost až 11 KB. Normální SVG však může být pouze 6 KB velký, což již značně snižuje spotřebu paměti.

Nyní zopakuj postup, klikni znovu na Soubor a poté na Uložit jako, ale tentokrát vyber optimalizované SVG.

Pojmenuj soubor například Logo_optimalizované a ulož. Následně se tě zeptá na několik možností. Zde můžeš převádět CSS atributy na XML atributy a provádět různá optimalizační nastavení. Doporučuji vybrat možnosti, které se ti zdají nejlepší.

Potvrď svůj výběr a zkontroluj novou velikost souboru. Často bude optimalizovaná verze pouze 4 KB velká. To ukazuje, že pomocí této metody byl soubor ještě více komprimován.

Když nyní otevřeš soubory ve webovém prohlížeči, zjistíš, že jak normální, tak optimalizované SVG vypadají stejně. Vlož adresy souborů do adresního řádku prohlížeče, abys si ověřil výsledek.

Pro otestování jejich škálovatelnosti můžeš upravit úroveň zoomu v prohlížeči. Například zvětšit na 50% nebo zmenšit na 300%. Zjistíš, že hrany zůstávají ostré, bez ohledu na úroveň zoomu.

Tyto vlastnosti souborů SVG je činí vhodnými pro použití na webových stránkách. Můžeš mít jistotu, že tvůj logo bude na všech zařízeních jasně a zřetelně zobrazeno, bez ohledu na to, jak velké je zobrazeno.

Použitím formátu SVG pro tvé grafiky nejenže snížíš velikost souborů, ale také zajistíš, že kvalita tvých designů zůstane zachována v libovolném rozlišení.

Shrnutí

V tomto návodu jsi se naučil, jak uložit své vektorové grafiky ve formátu SVG. To ti umožní efektivně využívat své designy na webu a přináší výhodu škálovatelnosti a malé velikosti souborů.