Scalable Vector Graphics

SVG (Scalable Vector Graphics) popisuje obrázek tvary, ne pixely: cestami, kruhy, textem, přechody a barvami zapsanými jako text v XML. Dá se zvětšit na libovolnou velikost, aniž by se rozmazal, a proto na webu vládne u log, ikon, ilustrací a grafů. Soubory SVG dostanete od grafiků, z knihoven ikon, jako export z Illustratoru, Figmy nebo Inkscape, z nástrojů na grafy a diagramy a také jako podklady pro plotry Cricut, Silhouette nebo laserové řezačky. Zobrazí ho každý současný webový prohlížeč.

Historie a verze

SVG je norma konsorcia W3C (World Wide Web Consortium). Práce začaly v roce 1996, první veřejný návrh vyšel v únoru 1999.

• SVG 1.0 se stalo doporučením W3C v září 2001.
• SVG 1.1 následovalo v lednu 2003, jeho druhé vydání (srpen 2011) je dodnes verzí, ze které vychází většina programů.
• SVG Tiny 1.2 (prosinec 2008) byl profil pro mobilní telefony.
• SVG 2 je od října 2018 kandidátem na doporučení a stále se dokončuje. Prohlížeče z něj umí hodně, editory méně.

Typ MIME je image/svg+xml. SVG zkomprimované gzipem má příponu .svgz.

Co SVG umí obsahovat

• Vektorové tvary (path, rect, circle…) s výplní, obrysem, přechody, vzorky, ořezem, maskami a filtry jako rozostření nebo stín.
• Skutečný text v pojmenovaném písmu. Samotné písmo v souboru obvykle není, výsledek tedy závisí na písmech nainstalovaných tam, kde se SVG zobrazuje.
• Rastrové obrázky, buď vložené jako data base64, nebo odkazované na samostatný soubor.
• Styly CSS, animace a JavaScript. Protože SVG umí spouštět skripty, odmítá ho kvůli bezpečnosti řada formulářů, e-shopů i poštovních klientů.
• Rozměr: plátno určují width, height a viewBox. Pixel CSS je 1/96 palce, 96 uživatelských jednotek tedy dělá jeden palec.

Jak SVG otevřít a upravit

• Prohlížení: přetáhněte soubor do libovolného prohlížeče. V mobilu ho otevřete ze správce souborů v prohlížeči.
• Úpravy: Inkscape (zdarma pro Windows, macOS i Linux), Adobe Illustrator, Affinity Designer, Figma. Jednodušší soubory zvládne LibreOffice Draw.
• Office: Word a PowerPoint v Microsoft 365 vkládají SVG jako grafiku.
• Náhledy v Průzkumníku Windows: chybí. Doplní je bezplatné PowerToys od Microsoftu.
• SVG je text, takže ho otevře i každý editor kódu. Hodí se to na ruční opravu barvy nebo rozměru.

Časté potíže se SVG

Text v SVG má jiné písmo

Písmo uvedené v souboru není nainstalované v počítači nebo převodníku, který SVG vykresluje, a použije se náhradní. Před odesláním převeďte text na křivky: v Inkscape Cesta → Objekt na cestu, v Illustratoru Text → Vytvořit obrysy.

V SVG chybí obrázky

Byly jen odkazované na soubory na disku autora nebo na webu, ne vložené. Vyžádejte si verzi s vloženými obrázky. Náš převodník nemá přístup k internetu a odkazované soubory načíst neumí.

Převod SVG do PNG je rozmazaný nebo malý

PNG má pevný počet pixelů. Náš převodník vykresluje SVG do PNG při 150 dpi, z každého pixelu SVG je tak 1,5625 pixelu PNG. Rozměry a podrobnosti najdete u převodu SVG do PNG.

Web nebo e-shop SVG nepřijme

Pro obrázky na webu nahrajte PNG, pro tisk, kde musí vektory zůstat ostré, PDF.

Jak převést PNG nebo JPG do SVG

Jde o obkreslení, ne o převod. Náš převodník obkresluje rastrové obrázky jen černobíle, což se hodí na loga, podpisy a perokresbu. Barevné obrázky obkreslete v Inkscape funkcí Vektorizovat bitmapu s více průchody.

Převod SVG

• Převod SVG do PDF, EPS a PS: zůstává vektorový, pro tiskárny a sázecí programy.
• SVG do EMF/WMF pro starší Office, SVG do DXF pro CAD a laserové řezačky.
• SVG do PNG (150 dpi, průhlednost zůstane).
• SVG do JPG, WebP, GIF nebo TIFF: vykreslí se v rozměru daném souborem a uloží do cílového formátu. JPG dostane bílé pozadí a kvalitu 90.
• Animace ani skripty se do žádného z těchto formátů nepřenesou, vykreslí se výchozí statický stav.

SVG v kostce

Specifikace (anglicky): SVG 2 a SVG 1.1 Second Edition na webu W3C, historie formátu v popisu Kongresové knihovny USA.