Existuje spousta obrazových formátů, ale všechny jsou rozděleny do dvou velkých tříd – rastrové a vektorové. První jmenované se používají především pro různé složité a detailní grafiky, jako je fotografie. V nich může mít každý pixel, nejmenší prvek, svou vlastní barvu a soubor obecně jednoduše ukládá barvy pro každý bod v obrázku. Pro kompresi velikosti informací se samozřejmě používají různé metody a od toho je mnoho rastrových formátů - bmp, png, jpg a další. Obvykle jpg vykazuje nejlepší účinnost, protože vytváří malý soubor s poměrně dobrými detaily. Má to ale nevýhodu – ztrátu informací při komprimaci informací. Pokud tedy zmenšíte velikost souboru, obraz se zhorší.

Práce se soubory SVG.

A když takové fotografie zvětšíte, budou viditelné pixely. Vektorové formáty fungují na úplně jiném principu. Používají čáry, segmenty a obrazce, které jsou popsány matematickými vzorci. Jakýkoli prostor, který je jimi omezen, může být vyplněn barvou nebo přechodem. Výsledkem je obraz, který není vázán na konkrétní rozměry – lze jej snadno komprimovat nebo roztáhnout do obrovských velikostí bez ztráty kvality. Jedním z takových vektorových formátů je SVG. A stává se stále populárnější, zejména v prostředí pro vývoj webových aplikací.

Obecný popis rozšíření

Typ souboru SVG je zkratka pro Scalable Vector Graphics, tedy škálovatelná vektorová grafika. K popisu obrázků se používají značkovací jazyky VML a PGML. V podstatě to tak je Textový dokument, ve kterém jsou u každého obrázku popsány souřadnice vrcholů a čar jimi procházejících a také barvy různých prvků. První verze tohoto formátu byla vydána v roce 2001 a v současné době se aktivně vyvíjí druhá verze. To znamená, že je perspektivní a rozvíjející se. Jednou z výhod je malá velikost souboru, do kterého lze ukládat poměrně složité výkresy. Proto se nyní stále více ikon, piktogramů, log a dalších prvků webových stránek používá v tomto formátu, nikoli v rastrových. Díky tomu se stránky načítají rychleji. Mezi jedinečné vlastnosti formátu SVG patří interaktivita a animace. První umožňuje obrázku reagovat na akce uživatele, například na kliknutí myší nebo přesun některých prvků. Animace umožňuje vytvářet poměrně složité scénáře. Vše dohromady umožňuje vytvářet velmi krásné a živé grafické prvky pro webové stránky. Mohou být dokonce vloženy do běžných rastrových obrázků ve formátech png, jpg a dalších.

Přípona souboru .SVG

Na internetu najdete mnoho takových obrázků na fotografiích, včetně bezplatných. Vytvářejí se v grafických editorech Adobe Photoshop, Illustrator, Corel Draw a některé další. Vyvstává však otázka - jak otevřít formát SVG. Vestavěné nástroje Windows totiž neukazují, jaké obrázky obsahují. I když SVG můžete upravovat i v textový editor, například v Poznámkovém bloku, protože se jedná o textový dokument, ale k tomu potřebujete značné znalosti značkovacích jazyků. Soubor SVG můžete otevřít buď v programu, ve kterém byl vytvořen, nebo v jiném grafickém editoru, který tento formát podporuje. Nejoblíbenější:

Tyto názvy jsou samozřejmě seznamem programů pro práci vektorová grafika není vyčerpán. Je jich spousta, včetně nejpopulárnějšího editoru Adobe Photoshop, který umí ukládat obrázky jako vektory a má plugin pro jejich otevírání. Nezapomeňte na nejoblíbenější editor vektorová grafika Corel Draw, který lze nazvat nejoblíbenější.

Co dalšího by mohlo způsobit problémy se souborem?

Obyčejný pomocí Windows a mnoha dalších operačních systémech se soubory SVG neotevírají. Abyste viděli jejich obsah, natož abyste je upravovali, musíte si nainstalovat libovolný grafický editor, který tento formát podporuje.

K návrhu jakékoli webové stránky potřebujete jak statickou grafiku, tak různé animované a interaktivní prvky, které za prvé zatraktivňují informace na ní prezentované a za druhé přispívají k lepšímu vnímání materiálu.

Grafické informace se přenášejí mnohem pomaleji než textové informace a doba načítání obrázků je přímo závislá na velikosti jejich grafických souborů, takže rychlé načítání webových stránek vyžaduje malou velikost grafických obrázků v nich vložených. Toho posledního je dosaženo tím optimální volba formát grafický soubor, a také prostřednictvím optimalizace, jejímž úkolem je najít kompromis mezi rychlostí načítání stránky a kvalitou obrázků na ní prezentovaných. Možnosti optimalizace však nejsou neomezené a vysoce kvalitní snímky mívají působivý objem, takže dosáhnout Vysoká kvalita obrázky prezentované na webu v malých velikostech stále zůstávají vážným problémem.

Otázkou však není pouze velikost a kvalita; vývoj designu webové stránky se ukazuje jako záležitost, která vyžaduje, aby designér znal širokou škálu různých technologií a softwarových produktů, protože pro různé typy grafické informace pro jejich vytváření musíte používat různé formáty souborů a různé technologie. Pro statickou grafiku se používají formáty GIF, JPG nebo PNG, které lze vytvořit v různých grafických balíčcích. Pro animované objekty se používají animační formáty GIF a Flash a takové objekty jsou vyvíjeny ve specializovaných softwarových aplikacích (specifických pro každý z těchto typů formátů). Interaktivní prvky (rollovery, odkazy na ImageMap atd.) jsou také zpravidla vytvářeny ve specializovaných aplikacích a představují sadu grafických obrázků, mezi nimiž je navázáno spojení v souboru s HTML kódem, který je doplňuje.

Úspěšným řešením těchto problémů by mohl být přechod na grafický formát SVG (Scalable Vector Graphics škálovatelná vektorová grafika) založený na jazyce XML, díky kterému lze libovolný obrázek SVG reprezentovat jako sadu příkazové řádky(obr. 1), a samotný soubor SVG lze otevřít v libovolném textovém editoru včetně Poznámkového bloku. Tento je srovnatelný nová technologie byl původně vyvinut společností Adobe speciálně pro web a dnes je velmi zajímavý pro mobilní zařízení, protože poskytuje tvorbu vysoce kvalitní statické, animované a interaktivní grafiky. Proto není divu, že jej v roce 2003 aktivně podporuje konsorcium W3C (http://www.w3.org/Graphics/SVG), standard SVG 1.1 byl přijat W3C jako doporučení a tento moment Specifikace SVG 1.2 se vyvíjí (http://www.w3.org/TR/SVG12/).

s odpovídajícím obrázkem

Technologie SVG umožňuje kombinovat text, grafiku, animace a interaktivní komponenty v jednom formátu a je založena na třech typech grafických obrázků: vektorové tvary, obrázky a text. Tvary, jak je ve vektorové grafice zvykem, jsou reprezentovány buď přímočarými a křivočarými obrysy, nebo grafickými primitivy (obdélníky, elipsy atd.) a kresby jsou importované rastrové obrázky. Formát SVG navíc podporuje různé typy animovaných (připomínajících GIF a Flash animace) a interaktivních objektů, jako jsou rollovery, mapy odkazů a další navigační prvky. A jelikož je tento standard založen na jazyku XML, může soubor SVG spolu s prvky určenými pro vizuální zobrazení obsahovat i různá metadata.

Výhody a nevýhody použití formátu SVG

Použití formátu SVG vám umožňuje vyvíjet menší, rychleji se načítající, vysoce kvalitní a všestrannou grafiku pro web a mobilní zařízení, kterou žádný jiný grafický formát nemůže poskytnout. Mezi hlavní výhody grafického formátu SVG patří:

• vysoká kvalita obrázků bez ohledu na jejich velikost, což je vysvětleno vektorovou povahou formátu SVG. Obrázky lze neomezeně zmenšovat nebo zvětšovat bez ztráty kvality (obr. 2) v souladu s velikostí zobrazení, což umožňuje získat vysoce kvalitní obraz grafické informace na různé typy zařízení (stolní počítače, kapesní počítače atd.), a také umožňuje pečlivější zkoumání jednotlivých detailů, což je důležité například při práci s technickými výkresy;
• hodně menší velikost soubory ve srovnání s formáty GIF, JPG, PNG a animace GIF a ještě více s formátem Flash. Pokud je například soubor testován na článek formát GIF, komprimovaný v režimu komprese LZW, měl 26 KB, velikost odpovídajícího souboru SVG zabrala 1220 bajtů a při komprimaci do formátu SVGZ to bylo pouhých 685 bajtů.

Ale není to jen tak. Ve srovnání s tradičními možnostmi grafického znázornění webu má použití formátu SVG mnoho dalších nepopiratelných výhod.

Pro vývojáře jsou tedy důležité výhody:

• schopnost kombinovat statické, animované a interaktivní prvky v jednom formátu, stejně jako kombinace vektorových a rastrových objektů;
• vylepšené zpracování textu, včetně vyrovnání párů, zakřiveného textu a neomezeného používání písem;
• efektivnější kontrola přesnosti barev a větší možnosti použití přechodových výplní ve webových obrázcích vysoké rozlišení, stíny, filtry atd.;
• textová povaha formátu SVG a jeho podpora kaskádových stylů, což značně zjednodušuje proces aktualizace webové stránky a umožňuje v případě potřeby provést změny bez nutnosti speciální programy;
• integrace s databázemi postavenými na standardech XML (Extensible Markup Language) a CSS (Cascading Style Sheets), která umožňuje ukládat obrázky SVG do databáze a vytvářet pomocí nich dynamické webové stránky různé pro různé platformy, osobní nastavení atd.;
• žádné problémy s indexováním Soubory SVG jsou indexovány všemi vyhledávači (na rozdíl například od souborů SWF).

Uživatelé si užijí vysoce kvalitní obsah SVG s rychlým načítáním. Kromě toho je možné zkopírovat text umístěný na obrázku SVG, a uložit si tak některé užitečné informace pro sebe, stejně jako vyhledávat text v obrázku, což může být v některých případech extrémně nutné, například při hledání požadované jméno na mapě nebo kresbě.

Jak už to ale bývá, kromě výhod má technologie SVG i nevýhody, a to velmi závažné.

• Výrobci internetových prohlížečů nepodporují obrázky SVG. Výsledkem je, že pro zobrazení grafiky SVG z prohlížeče jsou uživatelé nuceni dodatečně nainstalovat plugin třetí strany, který tuto možnost poskytuje, například SVG Viewer od Adobe. Teoreticky to není obtížné, odpovídající pluginy se snadno instalují, jsou zdarma, mají malou velikost a lze je rychle stáhnout z internetu. V praxi se vše ukazuje jako mnohem složitější, protože většina uživatelů internetu si není vědoma existence těchto možností, a proto je nemůže zobrazit tenhle typ grafika bez pluginu to prostě není vidět. Situace se však postupně mění a v uplynulém roce dva přední vývojáři webových prohlížečů zavedli podporu formátu SVG. Opera Software na jaře vydala verzi 8 prohlížeče Opera, který podporuje SVG 1.0 Tiny; ve verzi Opery 9.0, která se objevila o něco později, byla implementována částečná podpora formátu SVG 1.0 Basic. Druhým vývojářem, který zahrnul podporu SVG, byla The Mozilla Organization.Do prohlížeče Firefox 1.5 byl zahrnut modul projektu Mozilla SVG, který poskytuje prohlížení grafiky SVG specifikace 1.1. Kromě toho v polovině roku 2005 začali vývojáři prohlížeče Safari pracujícího na počítačích se systémem Mac OS X aktivně pracovat na zavedení podpory pro SVG 1.1;
• Ve srovnání s jinými grafickými formáty je formát SVG stále slabě podporován vývojáři grafického softwaru, ačkoli přední grafické balíčky jako Adobe Illustrator, Corel DRAW atd. umožňují exportovat grafiku do souborů SVG. Soubory SVG lze samozřejmě vytvářet v jakémkoli textovém editoru, ale to není praktické z hlediska rychlosti a nákladů na vývoj. V případě potřeby je vhodné upravit soubor v textovém editoru (což je mimochodem možné pouze v případě, že máte hluboké znalosti technologie XML), ale vytvoření od začátku je nerozumné, protože to bude vyžadovat příliš mnoho času a úsilí. K tomu potřebujeme jednoduché a pohodlné nástroje pro rychlý vizuální vývoj grafiky ve formátu Scalable Vector Graphics s možností upravovat programový kód odpovídající obrázku ve stejném prostředí, ale takových produktů je velmi málo a nejsou dobře známý.

V důsledku toho nastává velmi smutná situace: mnoho uživatelů si zatím nemůže prohlížet grafiku SVG kvůli nedostatečné podpoře ve webových prohlížečích na správné úrovni, weboví vývojáři prakticky nevyvíjejí grafiku SVG, bez ohledu na to, jak atraktivní může být, a vývojáři softwaru nedopřávají webovým designérům různé aplikace zaměřené speciálně na SVG. Výsledkem je začarovaný kruh: „Pokud neexistuje obsah, pak lidé nepotřebují implementaci SVG, a pokud neexistuje implementace, pak neexistuje žádný obsah“ přesně tak byla popsána situace v jednom z konsorcia W3C setkání.

Na situaci se ale můžete podívat i z druhé strany: podpora SVG (i když ještě ne v plném rozsahu) ze strany dvou populárních internetových prohlížečů i zájem o technologii slavných vývojářů napovídá, že se „ledy prolomily“ a že SVG má reálnou šanci stát se jedním z oblíbených formátů pro prezentaci webových informací. Tato šance se zvyšuje díky rostoucímu zájmu o technologii SVG ve vztahu k mobilním zařízením, kde jsou požadavky na velikost a kvalitu obrazu mnohem vyšší. Opera Software například plánuje nejprve implementovat plnou podporu formátu SVG na desktopy a teprve poté přenést na mobilní platformy. Proto je na čase, aby se weboví designéři zamysleli nad používáním SVG, jinak riskují, že v blízké budoucnosti zůstanou pozadu.

Pluginy pro prohlížení SVG grafiky

Jak již bylo řečeno, většina uživatelů bude muset pro zobrazení SVG grafiky v plném rozsahu v okně internetového prohlížeče prozatím použít některý z vhodných pluginů, z nichž nejznámější jsou bezplatné moduly Adobe SVG Viewer a Corel SVG Viewer. První z nich, Adobe SVG Viewer, přichází jako samostatná aplikace, je kompaktní a pohodlný, funguje na různých platformách, podporuje velké množství internetových prohlížečů, a proto je mezi uživateli mnohem oblíbenější. Aplikace Corel SVG Viewer je součástí balíčku Corel Smart Graphics Studio, ale je k dispozici také jako freeware.

Pro prohlížení grafiky SVG existují i ​​další možnosti, můžete například použít odpovídající moduly z Amaya (http://www.w3.org/Amaya/), Apache Batik (http://xml.apache.org/ batik), balíčky KDE KSVG (http://www.kde.org) atd. Úplný seznam aplikací, které umožňují prohlížení obrázků SVG, je uveden na: http://wiki.svg.org/Viewer_Implementations.

Adobe SVG Viewer

Vývojář: Společnost Adobe Systems, Inc.

Velikost distribuce: 2,25 MB

Způsob distribuce: freeware (http://download.adobe.com/pub/adobe/magic/svgviewer/win/3.x/3.03/en/SVGView.exe)

Cena: zdarma

Pracujte pod kontrolou: Windows 95/98/Me/NT/2000/XP, Mac OS 8.6/9/X, Linux, Solaris

Podpora prohlížeče: Internet Explorer 4.0 nebo vyšší, Netscape Navigator nebo Communicator 4.5 až 4.78 (kromě 6.x)

Corel SVG Viewer

Vývojář: Společnost Corel Corp

Velikost distribuce: 4,9 MB

Způsob distribuce: freeware (modul lze stáhnout z: http://www.corel.com/servlet/Satellite?pagename=Corel/Downloads/Details&id=1042152917172)

Cena: zdarma

Práce pod kontrolou: Windows 98/NT/2000/Me/XP

Podpora prohlížeče: Microsoft Internet Explorer 5.5 a vyšší, Netscape Navigator nebo Communicator verze 4.79, 7.02

Programy pro tvorbu grafiky SVG

Všechny programy pro tvorbu SVG grafiky lze rozdělit do tří velkých skupin. První obsahuje oblíbené dvourozměrné grafické balíčky, které jsou zaměřeny na práci s vektorovou grafikou a zároveň umožňují export obrázků do formátu SVG. Nejoblíbenější z nich jsou Adobe Illustrator a CorelDRAW; navíc takový export do té či oné míry podporuje mnoho dalších aplikací: AutoCAD, Microsoft Visio atd. Hlavní výhodou této skupiny aplikací je, že mají pokročilé nástroje pro tvorbu vektorových obrázků a umožňují dosáhnout jedinečných efektů pomocí použití průhlednosti, přechodových výplní, různých filtrů atd. Tyto aplikace však vyžadují seriózní speciální školení, a proto jsou určeny především pro profesionální designéry. Navíc se z velké části nezaměřují na SVG design (ačkoli umožňují získat grafiku ve formátu Scalable Vector Graphics), přičemž poskytují pohodlné vizuální vytváření a zobrazování obrázků, tyto aplikace neumožňují jejich úpravu v textu. úroveň, která je relevantní pro grafiku SVG. Podstatné také je, že v nich není plně implementována podpora formátu Scalable Vector Graphics, v důsledku čehož nelze všechny prvky vektorových obrázků bezchybně exportovat do SVG.

Druhou skupinu softwarových produktů tvoří balíčky určené výhradně pro tvorbu SVG grafiky. Mají mnohem menší schopnosti, pokud jde o vizuální vývoj vektorových obrázků, ačkoli obsahují všechny potřebné nástroje. Poskytují ale pohodlné nástroje pro úpravu zdrojového kódu a umožňují paralelní práci s objekty SVG, jak vizuálně, tak na úrovni kódu, a mezi těmito možnostmi prezentace informací lze snadno přepínat. Všechny aplikace z této skupiny jsou velmi jednoduché a dostupné a nevyžadují mnoho času na učení. Navíc mají relativně malé distribuce (oproti aplikacím první skupiny), takže je lze bez problémů zakoupit přes internet. Existuje však velmi málo programů s takovými schopnostmi a níže se budeme podrobně zabývat pouze čtyřmi, které jsou nejvíce zajímavé a určené pro různé kategorie uživatelů. S úplný seznam Aplikace dostupné pro tvorbu grafiky SVG lze nalézt na: http://wiki.svg.org/Design_Tools.

A konečně do třetí skupiny lze zařadit libovolné textové editory včetně běžného poznámkového bloku. Jak bylo uvedeno výše, formát Scalable Vector Graphics je založen na jazyce XML, který vám v případě potřeby umožňuje vytvářet a upravovat soubory SVG na textové úrovni v textovém editoru.

Plně vybavené grafické aplikace, které vám umožní vytvářet grafiku SVG

Adobe Illustrator CS2

Vývojář: Společnost Adobe Systems, Inc.

Velikost distribuce: Verze pro Macintosh 428,9 MB, verze pro Windows 398,6 MB

Způsob distribuce: shareware (30denní demo verze balíčku je k dispozici na adrese: http://www.adobe.com/products/tryadobe/main.jsp#product=27)

Cena: 665 dolarů

Práce pod kontrolou: Windows 2000 s aktualizací Service Pack 3 nebo Windows XP, Mac OS X verze 10.2.4 až 10.2.7, Java Runtime Environment 1.4.1

Adobe Illustrator (obr. 3) od verze 9 implementoval import a export souborů SVG, a to na mnohem vyšší úrovni ve srovnání s podobnými grafickými aplikacemi. Balíček podporuje všechny stávající specifikace SVG, kódování ISO 8859-1, UTF-8 a UTF-16, různé možnosti exportu textu a umožňuje exportovat obrázky jak v běžném formátu SVG, tak v komprimovaném SVGZ.

V SVG grafice vytvořené v jejím prostředí můžete využít přechody, průhlednost, ale i celou řadu speciálně navržených SVG efektů (Effect=>SVG Filters) v podobě různých stínů, rozostření apod. Obrázky s takovými efekty zůstávají zachovány jasné při prohlížení ve webovém prohlížeči s libovolným zvětšením. Kromě statické grafiky umožňuje Illustrator vytvářet i interaktivní grafiku ve formátu SVG, k tomuto účelu je k dispozici speciální paleta SVG Interaktivita (lze ji otevřít z nabídky Window=>SVG Interactivity), ve které jsou akce pro interaktivní objekty jsou specifikovány. Stojí za zmínku, že práce na interaktivních prvcích SVG v Illustratoru vyžaduje znalost Java Scriptu a pochopení základních principů objektově orientovaného programování. Navíc pomocí formátu Scalable Vector Graphics v tomto programu můžete vytvářet dynamickou grafiku řízenou daty.

CorelDRAW Graphics Suite 12

Vývojář: Společnost Corel Corp.

Velikost distribuce tiva: 200 MB

Způsob distribuce: shareware (demo verzi lze stáhnout ze stránek internetového obchodu, například na adrese: http://allsoft.ru/Download.php?ver=17605)

Cena: 290 $ (Allsoft.ru)

Práce pod kontrolou: Windows NT/2000/XP

Známá aplikace pro vývoj profesionální vektorové grafiky CorelDRAW (obr. 4), která je součástí sady CorelDRAW Graphics Suite 12, poskytuje na základní úrovni import a export ve formátech SVG a SVGZ, a proto ji lze použít k vytváření statických a interaktivních SVG grafika.

do souboru SVG v aplikaci CorelDRAW

Aplikace podporuje nerozpoznaná data, atributy a metadata a také poskytuje možnost náhled SVG soubory v prohlížeči před exportem. Kromě toho je možné kódování Unicode pro metody kódování UTF-8 a UTF-16 a různé možnosti exportu textu a bitmapových obrázků. V Nejnovější verze Výrazně vylepšená podpora pro export symbolů, textu, stínů, obrysů, vrstev, vložených binárních obrázků atd.

Mayura Draw 4.3

Vývojář: Software Mayura

Velikost distribuce: 1,3 MB

Způsob distribuce: shareware (demo verze http://www.mayuradraw.com/mdraw.zip)

Cena: 39 dolarů

Práce pod kontrolou: Windows 95/98/Me/NT/2000/XP

Mayura Draw (obr. 5) velmi jednoduchý a levný program pro tvorbu vektorové grafiky určený pro běžného uživatele. Výsledné vektorové obrázky lze v případě potřeby exportovat do formátu SVG, a proto může být Mayura Draw možným řešením pro vývoj statické grafiky SVG. Program podporuje všechny hlavní nástroje vektorové grafiky a umožňuje získat vektorové obrázky založené na grafických primitivech, lineárních a křivočarých obrysech a textu. Seznam jeho schopností zahrnuje pohodlné prostředky pro zarovnání, distribuci a organizaci objektů, správu průhlednosti, použití vodítek a pravítek pro přesné umístění objektů a různé transformace.

Specializované balíčky pro tvorbu SVG grafiky

EvolGrafiX XStudio 6.1

Vývojář: EvolGrafiX

Velikost distribuce: 7,25 MB

Způsob distribuce: http://www.evolgrafix.de/htDocs/files/trials/xstudio6x/XStudio6-Trial.exe)

Cena: 449 $ komerční licence, 249 $ akademická licence

Práce pod kontrolou: Windows 2000/XP

Profesionální balíček XStudio (obr. 6) je pohodlným nástrojem pro tvorbu různorodé SVG grafiky pro web a mobilní zařízení a poskytuje plnou kontrolu jak nad SVG projektem jako celkem, tak nad vektorovými obrázky, animacemi, skripty atd. Aplikace je pohodlné, intuitivní a snadno přizpůsobitelné uživatelské rozhraní, poskytuje širokou škálu nástrojů, má vysoká rychlost práce, umožňuje vytvářet grafiku SVG všech existujících specifikací a podporuje všechny styly Scalable Vector Graphics. To vše v kombinaci s relativně nízkou cenou za profesionální balíček nám umožňuje považovat jej za nejlepší profesionální řešení svého druhu. XStudio přichází s podrobnou dokumentací podporovanou řadou výukových programů a snadno se učí.

Rýže. 6. Kombinace tvorby vizuálního obrazu s úpravou zdrojového kódu
v EvolGrafiX XStudio

Aplikace má všechny potřebné schopnosti pro tvorbu a zpracování vektorových obrázků a v tomto ohledu je velmi podobná balíčku Adobe Illustrator. XStudio je přitom zaměřeno přímo na přípravu statické, interaktivní a animované SVG grafiky, a proto je spolu s klasickými nástroji pro práci s vektorovými objekty doplněno o specifické schopnosti SVG. Vestavěný panel nástrojů DOM (Document Object Model) poskytuje hierarchickou reprezentaci objektů SVG, pohodlný editor XML umožňuje opravit zdrojový kód na úrovni textu a editor skriptů jej umožňuje doplnit skripty Java. Práce s kódem je organizována velmi pohodlně: fragmenty kódu vybraného objektu jsou automaticky zvýrazněny, je možné vyhledávat text a nastavovat záložky atd. Jakékoli změny kódu se okamžitě projeví ve vizuálním okně a vizuální změny se projeví v okně okno editoru.

Inkscape

Vývojář: IOSN (mezinárodní Open Source Network International Open Source Network)

Velikost distribuce: 8,7 MB

Cena: zdarma

Práce pod kontrolou: Windows 9x/NT/2000/XP, Mac OS X, Linux

Inkscape (obr. 7) nejslibnější vektorový editor založený na modelu Open Source, který je multiplatformní a je výkonným nástrojem pro vývoj grafiky v souladu se standardem Scalable Vector Graphics. se svými vlastními funkčnost práce s vektorovými obrázky, stejně jako rozhraní, je Inkscape velmi podobný CorelDRAW. Podporuje alfa kanály, práci s vrstvami, používání plynulého textu, velkolepé přechodové výplně, velké množství filtrů a efektů, různé transformace, pohodlná práce s obrysy a objekty, seskupování objektů a mnoho dalšího. Můžete importovat data ze souborů JPEG, PNG a TIFF a vložit je do obrázků SVG.

vestavěný editor Inkscape

Na rozdíl od CorelDRAW je však Inkscape umístěn jako aplikace pro návrháře SVG, a proto spolu s klasickou tvorbou vizuální grafiky poskytuje možnost přímo zpracovávat XML kód ve vestavěném textovém editoru. Program je nakonfigurován tak, aby ukládal obrázky do běžných a komprimovaných souborů SVG, i když je lze v případě potřeby převést do běžných vektorových a rastrových formátů.

Balíček Inkscape má pohodlné rusifikované rozhraní, snadno se učí a přichází s dobrým systémem nápovědy, včetně různých příkladů použití, a navíc, tato aplikace díky tomu všemu je velmi atraktivní pro širokou škálu uživatelů. Hlavní nevýhodou programu je nízká provozní rychlost a zvýšené nároky na systémové prostředky.

Corel WebDraw

Vývojář: Společnost Corel Corp

Velikost distribuce: 15,6 MB

Způsob distribuce: shareware (30denní demo http://www5.jasc.com/pub/wdw102ev.exe)

Cena: Verze ke stažení za 179 USD, verze na CD za 199 USD

Práce pod kontrolou: Windows 98/NT4/2000/Me/XP

Corel WebDraw (obrázek 8), lépe známý jako Jasc WebDraw, je komplexní řešení pro vytváření vysoce kvalitní grafiky a animací SVG zaměřené na profesionální designéry. A intuitivní rozhraní programu jej činí atraktivním pro širokou škálu uživatelů.

Aplikace poskytuje rozsáhlou sadu standardních grafických nástrojů typických pro plnohodnotnou vektorovou grafickou aplikaci: základní tvary (elipsa, obdélník, hvězda atd.), pero, mnohoúhelník, křivka, text atd. Spolu s vektorovými objekty vám WebDraw umožňuje doplnit objekty SVG externími rastrové obrázky. Kromě běžných výplní a překrývání hotových stylů můžete použít složité přechody, výplně včetně vzorů, které si sami vytvoříte. Chcete-li získat efektivnější obrázky, můžete použít filtry, a to jak docela jednoduché (rozmazání a stínování), tak složité (texturování a osvětlení). Mřížky, vodítka a pravítka vám pomohou přesně umístit objekty a vestavěný panel nástrojů DOM (Document Object Model) zobrazuje objekty SVG v hierarchickém stromovém zobrazení pro snadnou správu.

WebDraw je vybaven univerzálním animačním scénářem, Animation Timeline, který je postaven na základě SVG DOM (Document Object Model), který vám umožňuje kdykoli vybrat a animovat téměř jakýkoli atribut nebo vlastnost objektu všech typů. . Mechanismus drag-and-drop umožňuje upravovat počáteční a koncové body animace a také trvání každé fáze animace přímo na časové ose. Protože se klíčové časy animace vkládají pokaždé, když nastavíte možnosti animace pro atribut nebo vlastnost objektu, lze je přesunout do jiných oblastí scénáře pro účely automatické nastavení rozložení efektů animace v čase.

Balíček umožňuje pracovat s grafikou SVG ve dvou verzích: jak se sadou vizuálně zobrazených grafických objektů, tak s odpovídajícím zdrojovým kódem. Úpravy zdrojového kódu ve vestavěném textovém editoru souborů SVG poskytují další flexibilitu a kontrolu nad obsahem souboru. Automatická kontrola změny ve zdrojovém kódu pomáhají zajistit správné chování vytvářené grafiky a nalezené chyby jsou barevně označeny, což designérovi ušetří hodiny hledání ve stovkách řádků kódu. Výsledek jakýchkoli změn ve zdrojovém kódu se okamžitě zobrazí na obrazovce. V případě potřeby můžete do WebDraw importovat, upravovat a optimalizovat soubory SVG vytvořené v jiných aplikacích.

Sketsa SVG Editor 3.2.3

Vývojář: KIJUT

Velikost distribuce: 5,99 MB

Distribuční metoda: shareware (demo, které k obrázku přidá značku, http://www.kiyut.com/products/sketsa/sketsa.zip)

Cena: 49 dolarů

Pracujte pod kontrolou: Windows 2000/XP, Java VM (JRE) 1.5 a vyšší (http://www.java.com/getjava), UNIX a Linux

Aplikace Sketsa (obr. 9) je jedním z nejoblíbenějších editorů SVG a umožňuje vytvářet profesionální grafiku SVG včetně optimalizace ve formátu SVGZ. Balíček úspěšně kombinuje jednoduchost a snadné použití se širokou škálou funkcí a je kompatibilní se systémy Windows, Mac a Linux.

Sketsa podporuje klasickou sadu nástrojů typických pro jakoukoli vektorovou aplikaci, která umožňuje vytvářet a transformovat libovolné vektorové objekty založené jak na konturách, tak na grafických primitivech a textu, které lze v případě potřeby snadno doplnit rastrovými obrázky. Můžete ovládat průhlednost, používat přechodové výplně a filtry. To vše zdařile doplňují specializované schopnosti SVG, díky kterým lze upravovat jakýkoli obrázek nejen vizuálně, ale také v textový režim. Pro úpravu kódu SVG poskytuje balíček vestavěný textový editor XML. Pro usnadnění správy objektů je k dispozici vestavěný panel nástrojů DOM (Document Object Model), což je hierarchická stromová sada objektů v dokumentu SVG, která umožňuje vybrat libovolný objekt dokumentu a upravit jeho vlastnosti.

Nejoblíbenější grafické editory umožňuje ukládat obrázky v několika formátech. Pokud program pracuje s rastrovou grafikou, pak jsou pro ukládání souborů nabízeny rastrové formáty, pokud s vektorovou grafikou, pak vektorové formáty. Existují však rastrové editory, které podporují export výkresů do vektorových a smíšených formátů. Takovým je například Adobe Photoshop, který umí exportovat kresbu do SVG – dnes poměrně běžného formátu, do kterého lze uložit rastrovou i vektorovou grafiku.

Co je to formát SVG a kde se používá?

Vyvinutý v roce 2001 konsorciem Celosvětová Síť, formát SVG není přesně obyčejný dokument. Je založen na značkovacích jazycích VML a PGML, to znamená, že v podstatě mluvíme o textovém souboru. V tomto případě editory a prohlížeče interpretují SVG jako obrázek, který může být buď statický, nebo animovaný. Jako nejběžnější mezi ostatními formáty určenými pro ukládání vektorové grafiky se SVG v současnosti aktivně používá pro ukládání a distribuci vektorových a smíšených obrázků na internetu.

Jako všechny formáty má i SVG své klady a zápory. Mezi první patří škálovatelnost bez ztráty kvality, relativně nízká hmotnost, možnost integrovat obrázky PNG, GIF, JPG do dokumentů SVG, úpravy (pokud máte patřičné zkušenosti) v textových editorech, indexování vyhledávacími roboty, podpora animací a rozšířenost. Mezi výhody formátu patří také dobrá stlačitelnost, otevřenost a přizpůsobivost.

Na druhou stranu SVG zdědí své nedostatky se všemi souvisejícími. Formát není vhodný pro vytváření složitých objektů, protože soubory SVG rychle nabývají na váze, pokud se skládají z mnoha malých částí. Programy navíc potřebují číst celý dokument, aby zobrazily obrázek, což ztěžuje použití formátu v mapovacích aplikacích. Mezi nevýhody formátu zaznamenáváme relativně nízkou kompatibilitu mezi prohlížeči a chybějící alespoň minimální podporu 3D grafiky.

Nejlepší editory pro práci se soubory SVG

Jak již bylo zmíněno, můžete upravit soubor SVG v běžném textovém editoru, ale k tomu potřebujete specifické znalosti. Mnohem pohodlnější a správnější je používat vektorové grafické editory.

Adobe Illustrator

Nejfunkčnější nástroj, který je ideální pro roli editoru SVG. Adobe Illustrator má působivou sadu nástrojů pro práci s vektorovou a kombinovanou grafikou. Umožňuje vytvářet a upravovat jednoduché náčrty i složité umělecké ilustrace. Při práci s formátem SVG editor umožňuje použití vrstev a skriptovacích jazyků a použití speciálních efektů.

Boxy SVG

Obrázky SVG můžete otevřít také pomocí aplikace Boxy SVG speciálně vytvořené pro práci s tímto formátem. Tento editor je v mnohém horší než Adobe Illustrator, ale najdete v něm vše základní nástroje vytvářet a upravovat obrázky SVG. Aplikace podporuje práci s tvary a objekty, import písem a obrázků oblíbených formátů, práci s knihovnou Pixabay, prohlížení a úpravu zdrojového kódu SVG a CSS. Boxy SVG je k dispozici jako online služba a jako aplikace pro Windows 10, MacOS a Chrome OS.

Vectr

Jak jinak můžete otevřít soubor SVG? Pro práci se soubory tohoto typu existuje program Vectr, který si velmi dobře poradí s editačními úkoly, které mu byly přiděleny. Aplikace nabízí takové funkce, jako je změna jednotlivých částí vektorového obrázku, práce s vrstvami, přidávání textu a primitiv, aplikace efektů (například průhlednost, tah, vnější a vnitřní stín), použití přechodů, pera, čar a dalších nástrojů. Nástroj Vectr je zdarma a existují verze pro Windows, Linux a Chrome OS.

Inkscape

Na rozdíl od předchozích dvou programů není Inkscape třeba příliš představovat. Tento je silný a úplný bezplatný editor lze použít pro úpravy a vytváření vektorové grafiky libovolné složitosti, od ikon SVG až po plnohodnotné ilustrace. Inkscape umí pracovat s cestami, textem, značkami, vrstvami a kanály, přechody a texturami. Podporuje také vektorizaci rastrové grafiky, správu barev SVG a mnoho dalšího.

Mimochodem, barvu SVG můžete změnit úpravou zdrojového kódu souboru, ale k tomu je potřeba mít alespoň základní znalosti jazyka CSS a barevných kódů. Úpravou například parametru stylu v bloku kódu zvýrazněného na snímku obrazovky jsme nahradili bílou barvu červenou. A tak samozřejmě, pokud SVG upravujete čímkoli, tak Inkscape a podobné programy.

Jak otevřít SVG online

Pokud potřebujete online editor SVG, použijte webové verze Boxy SVG, Vectr a Inkscape. Funkční sada těchto edic je téměř identická jako u verzí pro stolní počítače. V rámci projektu www.rollapp.com/app/inkscape lze spustit například aplikaci Inkscape.

Pokud hledáte něco jednoduššího, vyzkoušejte online vektorový editor Sketchpad dostupný na adrese sketch.io/sketchpad. Sketchpad obsahuje nástroje, jako jsou štětce, čáry, šipky, primitiva, klipart, pero, pastelka, airbrush, výplň atd. Nechybí práce s vrstvami, paletami a přechody.

Tato služba však není vhodná pro vytváření obrázků SVG od začátku, ačkoli podporuje funkci kreslení ve volném formátu. Editor je zaměřen na začínající uživatele, takže v tom snadno přijdete.

Převaděče SVG na PNG

Soubor SVG můžete zobrazit jako běžný obrázek pouhým přetažením do okna prohlížeče, ale také se stává, že dokument SVG je třeba převést do přístupnějšího a známého grafického formátu, řekněme PNG. Li konvertibilní soubory hodně, má smysl používat bezplatný nástroj SVG2PNG, který vám umožňuje převést SVG na PNG dávkový režim. Chcete-li převést SVG na PNG, spusťte nástroj, přetáhněte vektorové soubory do jeho okna, klikněte na „Start“ a získejte výsledek.

Pokud máte na svém počítači nainstalováno antivirový program Umět prohledejte všechny soubory v počítači a také každý soubor jednotlivě. Libovolný soubor můžete zkontrolovat kliknutím pravým tlačítkem myši na soubor a výběrem příslušné možnosti pro kontrolu souboru na přítomnost virů.

Například na tomto obrázku je to zvýrazněno soubor můj-soubor.svg, pak je třeba na tento soubor kliknout pravým tlačítkem a vybrat možnost v nabídce souboru "skenovat pomocí AVG". Když vyberete tuto možnost, AVG Antivirus otevře a zkontroluje soubor na přítomnost virů.

Někdy v důsledku toho může dojít k chybě nesprávná instalace softwaru, což může být způsobeno problémem, ke kterému došlo během procesu instalace. To může narušit váš operační systém propojte svůj soubor SVG se správnou softwarovou aplikací, ovlivňující tzv "přidružení přípony souboru".

Někdy jednoduché přeinstalace No Cash GBA (No $ GBA) může vyřešit váš problém správným propojením SVG s No Cash GBA (No $ GBA). V jiných případech mohou nastat problémy s přidružením souborů špatné programování softwaru vývojáře a možná budete muset vývojáře kontaktovat s žádostí o další pomoc.

Rada: Zkuste aktualizovat No Cash GBA (No $ GBA) na nejnovější verzi, abyste měli jistotu, že máte nejnovější opravy a aktualizace.

Může se to zdát příliš zřejmé, ale často Problém může způsobovat samotný soubor SVG. Pokud jste soubor obdrželi prostřednictvím přílohy E-mailem nebo jej stáhli z webové stránky a proces stahování byl přerušen (například výpadek proudu nebo jiný důvod), soubor může být poškozen. Pokud je to možné, zkuste získat novou kopii souboru SVG a zkuste jej znovu otevřít.

Opatrně: Poškozený soubor může způsobit vedlejší poškození předchozího nebo existujícího souboru malware na vašem PC, takže je velmi důležité mít na vašem počítači neustále spuštěný aktualizovaný antivirus.

Pokud je váš soubor SVG související s hardwarem vašeho počítače k otevření souboru, který možná budete potřebovat aktualizovat ovladače zařízení spojené s tímto zařízením.

Tento problém obvykle spojené s typy mediálních souborů, které závisí na úspěšném otevření hardwaru uvnitř počítače, např. zvuková karta nebo grafická karta. Pokud se například pokoušíte otevřít zvukový soubor, ale nemůžete jej otevřít, možná budete muset aktualizovat ovladače zvukové karty.

Rada: Pokud se při pokusu o otevření souboru SVG dostanete Chybová zpráva souboru .SYS, problém by asi mohl být související s poškozenými nebo zastaralými ovladači zařízení které je třeba aktualizovat. Tento proces lze usnadnit pomocí softwaru pro aktualizaci ovladače, jako je DriverDoc.

Pokud kroky problém nevyřeší a stále máte problémy s otevřením souborů SVG, což může být způsobeno nedostatek dostupných systémových zdrojů. Některé verze souborů SVG mohou vyžadovat značné množství zdrojů (např. paměť/RAM, výpočetní výkon), aby se v počítači správně otevřely. K tomuto problému dochází poměrně často, pokud používáte poměrně starý počítač. Hardware a zároveň mnohem novější operační systém.

K tomuto problému může dojít, když má počítač potíže s dokončením úkolu, protože operační systém(a další spuštěné služby Pozadí) umět spotřebuje příliš mnoho zdrojů na otevření souboru SVG. Před otevřením uloženého souboru hry zkuste zavřít všechny aplikace v počítači. Uvolněním všech dostupných zdrojů na vašem počítači budete v nejlepší možné pozici, kdy se pokusíte otevřít váš soubor SVG.

jestli ty dokončil všechny výše popsané kroky a váš soubor SVG se stále neotevře, možná budete muset spustit aktualizace vybavení. Ve většině případů, dokonce i při použití starších verzí hardwaru, může být výpočetní výkon pro většinu uživatelských aplikací stále více než dostatečný (pokud nevykonáváte mnoho práce náročné na CPU, jako je 3D vykreslování, finanční/vědecké modelování nebo intenzivní multimediální práce). Tím pádem, je pravděpodobné, že váš počítač nemá dostatek paměti(běžněji nazývané „RAM“, popř RAM) k provedení úlohy otevření souboru.

Od autora: Obrázky SVG nejsou tak běžné jako naše oblíbené rastrové formáty PNG a JPG, ale výhody vektorové grafiky přitahují stále více designérů. Designéři ve svých projektech stále častěji využívají vektorovou grafiku. Dříve jsme si museli stáhnout desktopové aplikace jako Adobe Illustrator a Inkscape, ale v roce 2017 můžeme navrhovat vektorovou grafiku, aniž bychom opustili prohlížeč. Pokud jste hledali bezplatný editor SVG, můžete začít s těmito šesti bezplatnými nástroji.

Vectr

Vectr – dobrá volba pro začátečníky i pokročilé uživatele SVG. Rozhraní je elegantní a není přeplněné příliš mnoha nástroji, které nebudete používat. Editor je vhodný pro začátečníky ve vektorové ilustrace. Uživatel by se neměl ztratit mezi nástroji, které k jakému účelu neslouží. Sada obsahuje několik lekcí. I když jste v SVG nováčkem, můžete se rychle naučit.

Vše výše uvedené však neznamená, že Vectr má špatnou funkčnost. Má všechny základní sady pro vytvoření běžného obrázku: tvary, text, vrstvy, stíny, rámečky, pozadí atd. S plnohodnotným desktopovým editorem se to sice nemůže srovnávat, ale pro rychlé návrhy a úpravy to bohatě stačí. Můžete vytvořit obrázek od začátku nebo nahrát existující.

Při načítání složitých ilustrací do Vectr (mapy nebo podrobné diagramy) mohou nastat chyby. Ne vždy si editor dobře poradí se složitou grafikou. Pro jednodušší SVG (ikony, loga atd.) však tento editor postačí.

JavaScript. Rychlý start

Pokud v online verze Nepotřebujete žádné funkce, můžete si stáhnout desktopovou verzi aplikace. Editor je k dispozici pro Windows, Mac, Linux a Chromebook.

Snad nejlepší funkcí ve Vectr je, že můžete propojit a vložit obrázky přímo z webu Vectr, což z něj dělá efektivního hostitele SVG. Mnoho služeb blokuje stahování souborů SVG, takže je to vážné plus. Obrázky SVG z Vectr můžete zobrazit na vzdálených webech, jako jsou WP, Medium, Tumblr atd., které blokují přímé načítání SVG, ale umožňují jeho zobrazení na dálku.

Vectr vám umožňuje sdílet vektorovou grafiku v panelu editoru, aby jiní uživatelé mohli upravovat grafiku, kterou vytvoříte. To znamená, že můžete například vytvořit šablonu loga SVG, kterou si uživatelé mohou upravit podle svých představ. To vše v prohlížeči.

Za tímto účelem Vectr nedávno vydal verzi editoru ve formuláři plugin pro WP.

RollApp

Na rozdíl od jiných nástrojů v seznamu, když přejdete na domovská stránka RollApp, editor se před vámi neotevře. RollApp je sada aplikací a editor SVG je jen jednou z aplikací. Skvělý nástroj, toto je verze prohlížeče Inkscape.

Chcete-li používat RollApp, potřebujete účet. Můžete si zaregistrovat nový nebo se přihlásit pomocí pomocí Google, Facebook, Amazon. Velmi pohodlné, nesnáším vytváření tisíců nových účtů, jen abych viděl aplikaci.

Inkscape v celé své kráse! RollApp je bezpochyby nejbohatší aplikací na seznamu. Doslova používáte Inkscape ve svém prohlížeči! Neporovnal jsem každý detail, ale zdá se, že tato aplikace má VŠECHNY funkce Incscape, jako jsou vrstvy, objekty, text, cesty, filtry, efekty, rozšíření atd.

Velké soubory nejsou zpracovávány tak rychle, protože akce se provádějí na aplikačních serverech a přes internet. Zkrátka – pokud potřebujete upravovat velké a složité soubory, RollApp to neudělá ideální varianta, ale pro jiné úkoly, které nejsou součástí základní sady, se tento editor hodí lépe než ostatní.

BoxySVG

Pokud čtete SitePoint po dlouhou dobu, měli byste být obeznámeni s editorem BoxySVG, protože za posledních 12 měsíců jsme o něm již mluvili. Nebudu dělat podrobnou recenzi, protože to již bylo provedeno v tento článek.

JavaScript. Rychlý start

Naučte se základy JavaScriptu s praktickým příkladem, jak vytvořit webovou aplikaci.

Důležité je, že od Alexovy recenze přidal BoxySVG inspektor kódu, což z něj dělá jeden z nejdůležitějších nástrojů SVG pro webové vývojáře.

Janvas

Před pár lety Janvas byl velmi populární editor SVG. Bohužel, Nedávno Tento editor se nevyvíjí, ale i tak stále funguje. Web jde dopředu, ale Janvas stagnuje, takže zájem o něj opadl. Alex ze SitePointu s tímto nástrojem v letech 2013-14 trochu pracoval (včetně placené verze) a dokonce chvíli odpovídal na dotazy na stránce Google+. Janvas byl docela mocný nástroj.

Hlavním problémem Janvasu je, že je trochu zastaralý. Prohlížeče se vyvíjejí a aplikace, které nesledují prohlížeče, jsou každým dnem méně stabilní. Janvas má mnoho funkcí: tvary, text, kreslicí nástroje, cesty, masky a vrstvy. Uživatelé na fórech však říkají, že mnoho z těchto funkcí nepřináší požadované výsledky.

Je tu dobrá zpráva – vyjde nová verze v podobě aplikace pro Chrome. Doufáme, že problémy vyřeší.

DrawSVG

Možná jste si již vybrali bezplatný online editor SVG. Pokud ne, tak jděte dál. DrawSVG je plně kompatibilní editor SVG s mnoha funkcemi. Moc se mi líbí, že design této aplikace je opravdu na míru webu a nevypadá jako port desktopové aplikace do prohlížeče. Nabídka je umístěna vlevo, kliknutím se otevře nabídka druhé úrovně atd.

S DrawSVG můžete kreslit, upravovat a vykreslovat objekty. Můžete kreslit jednoduché tvary, jsou tu Bezierovy křivky, rovný i zakřivený text, mnoho stylů tahů a výplní atd. SVG lze také exportovat do PNG.

SVG-upravit

SVG-upravit- dědeček online editory vektorová grafika se objevila v polovině 2000. Neexistuje žádná funkce serveru, vše funguje v prohlížeči. Je nemožné uložit vaši práci bez přidání vlastní funkce.

Nicméně pro editor, jehož život začal jako velmi omezený a obskurní program pro vektorové kreslení, se funkce SVG-edit neustále zlepšovaly.

Pomocí SVG-edit můžete kreslit jednoduché tvary (čáry, obdélníky, kruhy, mnohoúhelníky, čáry od ruky atd.), používat cesty, vrstvy, přechody, můžete prohlížet a upravovat zdroje SVG, exportovat do PNG, JPEG, BMP, WEBP, atd.

Závěr

Kromě těchto 6 editorů SVG existují další, ale jen málo z nich nabízí více funkcí než pět výše uvedených.

Pokud to s SVG chcete brát vážně a tyto nástroje nemají funkci, kterou potřebujete, můžete si kdykoli stáhnout desktopový editor SVG, jako je Illustrator nebo Inkscape. Pro snadnost, rychlost a flexibilitu však všechny výše uvedené editory nabízejí užitečnou sadu funkcí.

PS: Můžete to také zkusit Figma. Je to spíše nástroj pro tvorbu uživatelského rozhraní než editor SVG. Má však vynikající sadu nástrojů a generuje dobře optimalizovaný kód SVG.