Det finns många bildformat, men de är alla indelade i två stora klasser - raster och vektor. De förstnämnda används främst för olika komplex och detaljerad grafik, som fotografering. I dem kan varje pixel, det minsta elementet, ha sin egen färg, och filen lagrar i allmänhet bara färgerna för varje punkt i bilden. Naturligtvis används olika metoder för att komprimera storleken på information, och från detta finns det många rasterformat - bmp, png, jpg och andra. Vanligtvis visar jpg den bästa effektiviteten, eftersom den ger en liten fil med ganska bra detaljer. Men det har en nackdel - förlust av information vid komprimering av information. Därför, om du minskar filstorleken, försämras bilden.

Arbeta med SVG-filer.

Och när du förstorar sådana fotografier blir pixlar synliga. Vektorformat fungerar på en helt annan princip. De använder linjer, segment och figurer som beskrivs med matematiska formler. Alla utrymmen som begränsas av dem kan fyllas med färg eller gradient. Resultatet är en bild som inte är bunden till specifika dimensioner - den kan enkelt komprimeras eller sträckas till enorma storlekar utan kvalitetsförlust. Ett sådant vektorformat är SVG. Och det blir mer och mer populärt, särskilt i webbutvecklingsmiljön.

Allmän beskrivning av tillbyggnaden

SVG-filtypen är en förkortning för Scalable Vector Graphics, det vill säga skalbar vektorgrafik. VML och PGML markup languages ​​används för att beskriva bilder. Detta är i huvudsak Textdokument, i vilken för varje figur beskrivs koordinaterna för de hörn och linjer som passerar genom dem, liksom färgerna på olika element. Den första versionen av detta format släpptes 2001, och en andra version håller för närvarande på att utvecklas. Det vill säga, det är lovande och utvecklande. En av fördelarna är den lilla filstorleken, där ganska komplexa ritningar kan sparas. Därför används nu fler och fler ikoner, piktogram, logotyper och andra webbplatselement i detta format, och inte i raster. Detta gör att sajten laddas snabbare. De unika funktionerna i SVG-formatet inkluderar interaktivitet och animering. Den första låter bilden svara på användaråtgärder, till exempel att klicka med musen eller flytta vissa element. Animation låter dig skapa ganska komplexa scenarier. Allt tillsammans gör att du kan skapa mycket vackra och livliga grafiska element för webbplatser. De kan till och med bäddas in i vanliga rasterbilder i png, jpg och andra format.

.SVG filtillägg

På Internet kan du hitta många sådana bilder på fotoaktier, inklusive gratis. De skapas i grafiska redaktörer Adobe Photoshop, Illustrator, Corel Draw och några andra. Men frågan uppstår - hur man öppnar SVG-formatet. De inbyggda Windows-verktygen visar trots allt inte vilka bilder de innehåller. Även om du kan redigera SVG även i textredigerare, till exempel i Anteckningar, eftersom det är ett textdokument, men för detta behöver du ha betydande kunskaper i märkningsspråk. Du kan öppna en SVG-fil antingen i programmet där den skapades eller i någon annan grafisk editor som stöder detta format. Mest populär:

Naturligtvis är dessa namn en lista över program att arbeta med vektorgrafikär inte uttömd. Det finns många av dem, inklusive den mest populära redigeraren, Adobe Photoshop, som kan spara bilder som vektorer och har en plugin för att öppna dem. Glöm inte den mest populära redaktören vektorgrafik Corel Draw, som kan kallas den mest populära.

Vad mer kan orsaka problem med filen?

Vanlig använder Windows, och många andra operativsystem, öppnas inte SVG-filer. För att se deras innehåll, än mindre redigera dem, måste du installera en grafisk editor som stöder detta format.

För att designa vilken webbsida som helst behöver du både statisk grafik och en mängd olika animerade och interaktiva element, som för det första gör informationen som presenteras på den mer attraktiv och för det andra bidrar till en bättre uppfattning om materialet.

Grafisk information överförs mycket långsammare än textinformation, och laddningstiden för bilder är direkt beroende av storleken på deras grafiska filer, så snabb laddning av webbsidor kräver en liten storlek på de grafiska bilderna som är inbäddade i dem. Det senare uppnås genom optimalt val formatera grafisk fil, såväl som genom optimering, vars uppgift är att hitta en kompromiss mellan sidladdningshastigheten och kvaliteten på bilderna som presenteras på den. Men optimeringsmöjligheterna är inte obegränsade, och högkvalitativa bilder tenderar att ha en imponerande volym, så att uppnå Hög kvalitet av bilder som presenteras på webben i deras små storlekar är fortfarande ett allvarligt problem.

Men frågan handlar inte bara om storlek och kvalitet, att utveckla en design för en webbsida visar sig vara en fråga som kräver att designern känner till ett brett utbud av olika teknologier och mjukvaruprodukter, eftersom det för olika typer grafisk information du måste använda en mängd olika filformat och olika tekniker för att skapa dem. För statisk grafik används GIF-, JPG- eller PNG-format som kan skapas i en mängd olika grafikpaket. För animerade objekt används de animerade GIF- och Flash-formaten, och sådana objekt utvecklas i specialiserade mjukvaruapplikationer (specifika för var och en av dessa typer av format). Interaktiva element (rollovers, ImageMap-länkar, etc.) skapas också som regel i specialiserade applikationer och representerar en uppsättning grafiska bilder, vars koppling upprättas i en fil med HTML-kod som kompletterar dem.

En framgångsrik lösning på dessa problem kan vara övergången till SVG-grafikformatet (Scalable Vector Graphics scalable vector graphics), baserat på XML-språket, tack vare vilket vilken SVG-bild som helst kan representeras som en uppsättning kommandorader(Fig. 1), och själva SVG-filen kan öppnas i vilken textredigerare som helst, inklusive Anteckningar. Den här är jämförelsevis ny teknologi utvecklades ursprungligen av Adobe specifikt för webben och är idag av stort intresse för mobila enheter, vilket ger skapandet av högkvalitativ statisk, animerad och interaktiv grafik. Därför är det inte förvånande att det aktivt stöds av W3C-konsortiet (http://www.w3.org/Graphics/SVG) 2003, SVG 1.1-standarden antogs av W3C som en rekommendation, och det här ögonblicket SVG 1.2-specifikationen håller på att utvecklas (http://www.w3.org/TR/SVG12/).

med motsvarande bild

SVG-tekniken låter dig kombinera text, grafik, animation och interaktiva komponenter i ett format och bygger på tre typer av grafiska bilder: vektorformer, bilder och text. Former, som är brukligt i vektorgrafik, representeras antingen av rätlinjiga och krökta konturer, eller grafiska primitiver (rektanglar, ellipser, etc.), och ritningar är importerade rasterbilder. Dessutom stöder SVG-formatet olika typer av animerade (påminner om GIF- och Flash-animationer) och interaktiva objekt, såsom rollovers, länkkartor och andra navigeringselement. Och eftersom denna standard är baserad på XML-språket kan SVG-filen, tillsammans med element avsedda för visuell visning, även innehålla olika metadata.

För- och nackdelar med att använda SVG-formatet

Genom att använda SVG-formatet kan du utveckla mindre, snabbare laddad, högkvalitativ, mångsidig grafik för webben och mobila enheter som inget annat grafikformat kan tillhandahålla. De främsta fördelarna med SVG-grafikformatet inkluderar följande:

• hög kvalitet på bilder oavsett deras storlek, vilket förklaras av vektorkaraktären hos SVG-formatet. Bilder kan förminskas eller förstoras obegränsat utan kvalitetsförlust (fig. 2) i enlighet med skärmstorleken, vilket gör att du kan få högkvalitativ bild grafisk information om olika typer enheter (skrivbord, fickdatorer, etc.), och gör det också möjligt att mer noggrant undersöka individuella detaljer, detta är viktigt, till exempel när man arbetar med tekniska ritningar;
• mycket mindre storlek filer jämfört med GIF, JPG, PNG och animerade GIF-format, och ännu mer med Flash-formatet. Till exempel om filen testades för en artikel GIF-format, komprimerad i LZW-komprimeringsläge, var 26 KB, storleken på motsvarande SVG-fil tog 1220 byte, och när den komprimerades i SVGZ-formatet var den bara 685 byte.

Men det är inte bara det. Jämfört med traditionella alternativ för att grafiskt representera webben har användningen av SVG-formatet många andra obestridliga fördelar.

Så för utvecklare är de viktiga fördelarna:

• förmågan att kombinera statiska, animerade och interaktiva element i ett format, såväl som en kombination av vektor- och rasterobjekt;
• förbättrad texthantering, inklusive kerning, böjd text och obegränsad teckensnittsanvändning;
• effektivare kontroll av färgnoggrannhet och större möjligheter att använda gradientfyllningar i webbbilder hög upplösning, skuggor, filter, etc.;
• SVG-formatets textmässiga karaktär och dess stöd för kaskadformatmallar, vilket avsevärt förenklar processen att uppdatera en webbplats och gör det möjligt att vid behov göra ändringar i den utan att ta till specialprogram;
• integration med databaser byggda på XML (Extensible Markup Language) och CSS (Cascading Style Sheets) standarder, vilket gör att du kan spara SVG-bilder i databasen och skapa med dem dynamiska webbsidor olika för olika plattformar, personliga inställningar, etc.;
• inga indexeringsproblem SVG-filer indexeras av alla sökmotorer (till skillnad från till exempel SWF-filer).

Användare kommer att njuta av högkvalitativt SVG-innehåll som laddas snabbt. Dessutom är det möjligt att kopiera texten som finns på SVG-bilden, och därigenom spara lite användbar information till dig själv, samt söka efter text i bilden, vilket i vissa fall kan vara ytterst nödvändigt, till exempel vid sökning på önskat namn på en karta eller ritning.

Men som vanligt, tillsammans med fördelarna, har SVG-tekniken också nackdelar, och mycket allvarliga sådana.

• SVG-bilder stöds dåligt av webbläsartillverkare. Som ett resultat, för att se SVG-grafik från webbläsaren, tvingas användare att ytterligare installera ett tredjepartsplugin som tillhandahåller denna funktion, till exempel SVG Viewer från Adobe. I teorin är detta inte svårt; motsvarande plugins är lätta att installera, gratis, små i storlek och kan snabbt laddas ner från Internet. I praktiken visar sig allt vara mycket mer komplicerat, eftersom de flesta internetanvändare inte är medvetna om förekomsten av dessa funktioner och därför inte kan se den här typen grafik utan plugin är det helt enkelt inte synligt. Situationen förändras dock gradvis och under det senaste året har två ledande webbläsarutvecklare introducerat stöd för SVG-formatet. Under våren släppte Opera Software version 8 av webbläsaren Opera, som stöder SVG 1.0 Tiny; i versionen av Opera 9.0 som dök upp lite senare implementerades delvis stöd för SVG 1.0 Basic-formatet. Den andra utvecklaren som inkluderade SVG-stöd var The Mozilla Organization.Mozilla SVG-projektmodulen, som ger visning av SVG-grafik enligt 1.1-specifikationen, inkluderades i webbläsaren Firefox 1.5. I mitten av 2005 påbörjade dessutom utvecklarna av webbläsaren Safari som körde datorer som kör Mac OS X ett aktivt arbete med att introducera stöd för SVG 1.1;
• Jämfört med andra grafiska format stöds SVG-formatet fortfarande dåligt av grafikprogramutvecklare, även om ledande grafikpaket som Adobe Illustrator, Corel DRAW, etc. låter dig exportera grafik till SVG-filer. Naturligtvis kan SVG-filer skapas i vilken textredigerare som helst, men det är inte praktiskt när det gäller hastighet och kostnad för utveckling. Det är bekvämt att redigera en fil i en textredigerare om det behövs (vilket förresten bara är möjligt om du har djup kunskap om XML-teknik), men att skapa den från grunden är oklokt, eftersom det kommer att kräva överdriven tid och ansträngning. För att göra detta behöver vi enkla och bekväma verktyg för snabb visuell utveckling av grafik i formatet Scalable Vector Graphics med möjlighet att redigera programkoden som motsvarar bilden i samma miljö, men det finns väldigt få sådana produkter och de är inte välkänd.

Som ett resultat uppstår en mycket sorglig situation: många användare kan ännu inte se SVG-grafik på grund av bristen på stöd för det i webbläsare på rätt nivå, webbutvecklare utvecklar praktiskt taget inte SVG-grafik, oavsett hur attraktiv de kan vara, och mjukvaruutvecklare skämmer inte bort webbdesigners med en mängd olika applikationer som är specifikt inriktade på SVG. Resultatet är en ond cirkel: "Om det inte finns något innehåll, så behöver folk inte en SVG-implementering, och om det inte finns någon implementering, då finns det inget innehåll" det är precis så situationen beskrevs i ett av W3C-konsortiet möten.

Men du kan titta på situationen från andra sidan: stödet från SVG (även om det ännu inte är fullt ut) av två populära webbläsare, liksom intresset för kända utvecklares teknik, tyder på att "isen har brutit" och att SVG har en riktig chans att bli ett av de populära formaten för att presentera webbinformation. Denna chans ökar på grund av det växande intresset för SVG-teknik i relation till mobila enheter, där kraven på bildstorlek och kvalitet är mycket högre. Opera Software planerar till exempel att först implementera fullt stöd för SVG-formatet på stationära datorer och först sedan överföra det till mobila plattformar. Därför är det dags för webbdesigners att tänka på att använda SVG, annars riskerar de att hamna på efterkälken inom en snar framtid.

Plugins för att visa SVG-grafik

Som redan nämnts, för nu måste de flesta användare använda en av de lämpliga plugins för att se SVG-grafik i sin helhet i ett webbläsarfönster, varav de mest kända är de kostnadsfria modulerna Adobe SVG Viewer och Corel SVG Viewer. Den första av dem, Adobe SVG Viewer, kommer som en separat applikation, är kompakt och bekväm, fungerar på olika plattformar, stöder ett stort antal webbläsare och är därför mycket mer populär bland användare. Corel SVG Viewer-applikationen ingår i Corel Smart Graphics Studio-paketet, men är också tillgänglig som gratisprogram.

Det finns andra alternativ för att visa SVG-grafik; du kan till exempel använda motsvarande moduler från Amaya (http://www.w3.org/Amaya/), Apache Batik (http://xml.apache.org/ batik)-paket, KDE KSVG (http://www.kde.org), etc. En komplett lista över program som tillhandahåller visning av SVG-bilder finns på: http://wiki.svg.org/Viewer_Implementations.

Adobe SVG Viewer

Utvecklare: Adobe Systems, Inc.

Distributionsstorlek: 2,25 MB

Distributionsmetod: gratisprogram (http://download.adobe.com/pub/adobe/magic/svgviewer/win/3.x/3.03/en/SVGView.exe)

Pris: gratis

Arbeta under kontroll: Windows 95/98/Me/NT/2000/XP, Mac OS 8.6/9/X, Linux, Solaris

Webbläsarstöd: Internet Explorer 4.0 eller senare, Netscape Navigator eller Communicator 4.5 till 4.78 (förutom 6.x)

Corel SVG Viewer

Utvecklare: Corel Corp

Distributionsstorlek: 4,9 MB

Distributionsmetod: gratisprogram (modulen kan laddas ner från: http://www.corel.com/servlet/Satellite?pagename=Corel/Downloads/Details&id=1042152917172)

Pris: gratis

Arbeta under kontroll: Windows 98/NT/2000/Me/XP

Webbläsarstöd: Microsoft Internet Explorer 5.5 och senare, Netscape Navigator eller Communicator version 4.79, 7.02

Program för att skapa SVG-grafik

Alla program för att skapa SVG-grafik kan delas in i tre stora grupper. Det första inkluderar populära tvådimensionella grafikpaket som är fokuserade på att arbeta med vektorgrafik och som samtidigt låter dig exportera bilder till SVG-formatet. De mest populära av dem är Adobe Illustrator och CorelDRAW; dessutom stöder sådan export i en eller annan grad många andra applikationer: AutoCAD, Microsoft Visio, etc. Den största fördelen med denna grupp av applikationer är att de har avancerade verktyg för att skapa vektorbilder och låter dig uppnå unika effekter genom användningen av transparens, gradientfyllningar, olika filter, etc. Men dessa applikationer kräver seriös specialutbildning och är därför främst designade för professionella designers. Dessutom är de i stort sett inte fokuserade på SVG-design (även om de tillåter dig att få grafik i formatet Scalable Vector Graphics) samtidigt som de ger bekvämt visuellt skapande och visning av bilder, tillåter dessa applikationer inte att de justeras i texten nivå, som är relevant för SVG-grafik. Det är också viktigt att stödet för formatet Scalable Vector Graphics inte är fullt implementerat i dem, vilket gör att inte alla vektorbildelement kan exporteras till SVG utan fel.

Den andra gruppen av mjukvaruprodukter består av paket designade uteslutande för att skapa SVG-grafik. De har mycket mindre möjligheter när det gäller visuell utveckling av vektorbilder, även om de inkluderar alla nödvändiga verktyg. Men de tillhandahåller praktiska verktyg för att redigera källkod och låter dig arbeta med SVG-objekt parallellt, både visuellt och på kodnivå, och du kan enkelt växla mellan dessa alternativ för att presentera information. Alla applikationer från denna grupp är mycket enkla och tillgängliga och kräver inte mycket tid att lära sig. Dessutom har de relativt små distributioner (jämfört med applikationer i den första gruppen), så de kan köpas via Internet utan problem. Det finns dock väldigt få program med sådana möjligheter, och nedan kommer vi att överväga i detalj endast fyra som är av störst intresse och utformade för olika kategorier av användare. MED full lista Tillgängliga applikationer för att skapa SVG-grafik finns på: http://wiki.svg.org/Design_Tools.

Och slutligen kan den tredje gruppen inkludera alla textredigerare, inklusive ett vanligt anteckningsblock. Som nämnts ovan är formatet Scalable Vector Graphics baserat på XML-språket, vilket gör att du kan skapa och redigera SVG-filer på textnivå i en textredigerare om det behövs.

Fullständiga grafikapplikationer som låter dig skapa SVG-grafik

Adobe Illustrator CS2

Utvecklare: Adobe Systems, Inc.

Distributionsstorlek: Macintosh-version 428,9 MB, Windows-version 398,6 MB

Distributionsmetod: shareware (en 30-dagars demoversion av paketet finns tillgänglig på: http://www.adobe.com/products/tryadobe/main.jsp#product=27)

Pris: 665 USD

Arbeta under kontroll: Windows 2000 med Service Pack 3 eller Windows XP, Mac OS X version 10.2.4 till 10.2.7, Java Runtime Environment 1.4.1

Från och med version 9 har Adobe Illustrator (Fig. 3) implementerat import och export av SVG-filer, och på en mycket högre nivå jämfört med liknande grafiska applikationer. Paketet stöder alla befintliga SVG-specifikationer, ISO 8859-1, UTF-8 och UTF-16-kodningar, olika textexportalternativ och låter dig exportera bilder i både vanligt SVG-format och komprimerad SVGZ.

I SVG-grafiken som skapats i dess miljö kan du använda gradienter, transparens, samt en hel serie specialdesignade SVG-effekter (Effect=>SVG Filter) i form av olika skuggor, oskärpa etc. Bilder med sådana effekter finns kvar. tydlig när den visas i webbläsaren med valfri förstoring. Förutom statisk grafik låter Illustrator dig också skapa interaktiv grafik i SVG-format; för detta ändamål tillhandahålls en speciell SVG-interaktivitetspalett (den kan öppnas från menyn Fönster=>SVG-interaktivitet), där åtgärder för interaktiva objekt är specificerade. Det är värt att notera att arbetet med interaktiva SVG-element i Illustrator kräver kunskaper i Java Script och en förståelse för de grundläggande principerna för objektorienterad programmering. Med hjälp av formatet Scalable Vector Graphics i det här programmet kan du dessutom skapa dynamisk datadriven grafik.

CorelDRAW Graphics Suite 12

Utvecklare: Corel Corp.

Distributionsstorlek Tiva: 200 MB

Distributionsmetod: shareware (demoversionen kan laddas ner från webbutikers webbplatser, till exempel på: http://allsoft.ru/Download.php?ver=17605)

Pris:$290 (Allsoft.ru)

Arbeta under kontroll: Windows NT/2000/XP

Den välkända applikationen för att utveckla professionell vektorgrafik, CorelDRAW (Fig. 4), som ingår i CorelDRAW Graphics Suite 12, tillhandahåller import och export i SVG- och SVGZ-format på en grundläggande nivå och kan därför användas för att skapa statisk och interaktiv SVG-grafik.

till en SVG-fil i CorelDRAW

Applikationen stöder okänd data, attribut och metadata, och ger också möjligheten förhandsvisning SVG-filer i webbläsaren innan du exporterar. Dessutom är Unicode-kodning möjlig för UTF-8- och UTF-16-kodningsmetoder och olika alternativ för att exportera text och bitmappsbilder. I senaste versionen Betydligt förbättrat stöd för export av symboler, text, skuggor, konturer, lager, inbäddade binära bilder, etc.

Mayura oavgjort 4.3

Utvecklare: Mayura programvara

Distributionsstorlek: 1,3 MB

Distributionsmetod: shareware (demoversion http://www.mayuradraw.com/mdraw.zip)

Pris: 39 USD

Arbeta under kontroll: Windows 95/98/Me/NT/2000/XP

Mayura Draw (Fig. 5) ett mycket enkelt och billigt program för att skapa vektorgrafik som är designat för den allmänna användaren. De resulterande vektorbilderna kan exporteras till SVG-format om så önskas, och därför kan Mayura Draw vara en möjlig lösning för att utveckla statisk SVG-grafik. Programmet stöder alla de viktigaste vektorgrafikverktygen och låter dig få vektorbilder baserade på grafiska primitiver, linjära och kurvlinjära konturer och text. Listan över dess funktioner inkluderar praktiska sätt att justera, distribuera och organisera objekt, hantera transparens, använda guider och linjaler för exakt placering av objekt och olika transformationer.

Specialiserade paket för att skapa SVG-grafik

EvolGrafiX XStudio 6.1

Utvecklare: EvolGrafiX

Distributionsstorlek: 7,25 MB

Distributionsmetod: http://www.evolgrafix.de/htDocs/files/trials/xstudio6x/XStudio6-Trial.exe)

Pris:$449 kommersiell licens, $249 akademisk licens

Arbeta under kontroll: Windows 2000/XP

Det professionella paketet XStudio (fig. 6) är ett bekvämt verktyg för att skapa olika SVG-grafik för webben och mobila enheter och ger full kontroll över både SVG-projektet som helhet och över vektorbilder, animationer, skript, etc. Applikationen är bekvämt, intuitivt och lätt att anpassa användargränssnitt, tillhandahåller ett brett utbud av verktyg, har hög hastighet fungerar, låter dig skapa SVG-grafik med alla befintliga specifikationer och stöder alla skalbara vektorgrafikstilar. Allt detta, i kombination med ett relativt lågt pris för ett professionellt paket, gör att vi kan betrakta det som den bästa professionella lösningen i sitt slag. XStudio levereras med detaljerad dokumentation som stöds av en serie handledningar och är lätt att lära sig.

Ris. 6. Att kombinera visuell bildskapande med redigering av källkod
i EvolGrafiX XStudio

Applikationen har alla nödvändiga funktioner för att skapa och bearbeta vektorbilder och är i detta avseende mycket lik Adobe Illustrator-paketet. Samtidigt fokuserar XStudio direkt på framställning av statisk, interaktiv och animerad SVG-grafik och därför kompletteras den, tillsammans med klassiska verktyg för att arbeta med vektorobjekt, med specifika SVG-möjligheter. Det inbyggda verktygsfältet Document Object Model (DOM) ger en hierarkisk representation av SVG-objekt, en bekväm XML-redigerare låter dig korrigera källkoden på textnivå och en skriptredigerare låter dig komplettera den med Java-skript. Arbetet med kod är mycket bekvämt organiserat: kodfragment av det valda objektet markeras automatiskt, det är möjligt att söka efter text och ställa in bokmärken, etc. Alla kodändringar återspeglas omedelbart i det visuella visningsfönstret, och visuella ändringar återspeglas i redigeringsfönster.

Inkscape

Utvecklare: IOSN (International Öppen källa Network International Open Source Network)

Distributionsstorlek: 8,7 MB

Pris: gratis

Arbeta under kontroll: Windows 9x/NT/2000/XP, Mac OS X, Linux

Inkscape (Fig. 7) det mest lovande vektor editor baserad på Open Source-modellen, som är multiplattform och är ett kraftfullt verktyg för att utveckla grafik i enlighet med Scalable Vector Graphics-standarden. med sina egna funktionalitet arbetar med vektorbilder, såväl som gränssnittet, är Inkscape väldigt likt CorelDRAW. Den stöder alfakanaler, arbetar med lager, använder flödande text, spektakulära gradientfyllningar, ett stort antal filter och effekter, olika transformationer, bekvämt arbete med konturer och objekt, gruppering av objekt och mycket mer. Du kan importera data från JPEG-, PNG- och TIFF-filer och bädda in dem i SVG-bilder.

inbyggd Inkscape-redigerare

Men till skillnad från CorelDRAW är Inkscape placerat som en applikation för SVG-designers, därför ger den, tillsammans med klassisk visuell grafik, möjligheten att direkt bearbeta XML-kod i den inbyggda textredigeraren. Programmet är konfigurerat för att spara bilder i vanliga och komprimerade SVG-filer, även om de kan konverteras till vanliga vektor- och rasterformat om så önskas.

Inkscape-paketet har ett bekvämt Russified-gränssnitt, är lätt att lära sig och kommer med ett bra hjälpsystem, inklusive olika exempel på användning, och dessutom, den här applikationen gratis allt detta gör det mycket attraktivt för ett brett spektrum av användare. De största nackdelarna med programmet är dess låga driftshastighet och ökade krav på systemresurser.

Corel WebDraw

Utvecklare: Corel Corp

Distributionsstorlek: 15,6 MB

Distributionsmetod: shareware (30-dagars demo http://www5.jasc.com/pub/wdw102ev.exe)

Pris:$179 nedladdningsversion, $199 CD-version

Arbeta under kontroll: Windows 98/NT4/2000/Me/XP

Corel WebDraw (Figur 8), mer känd som Jasc WebDraw, är en heltäckande lösning för att skapa högkvalitativ SVG-grafik och animationer riktade till professionella designers. Och programmets intuitiva gränssnitt gör det attraktivt för ett brett spektrum av användare.

Applikationen tillhandahåller en omfattande uppsättning standardgrafiska verktyg som är typiska för en fullfjädrad vektorgrafikapplikation: grundläggande former (ellips, rektangel, stjärna, etc.), penna, polygon, polylinje, text, etc. Tillsammans med vektorobjekt låter WebDraw dig komplettera SVG-objekt med externa rasterbilder. Förutom vanliga fyllningar och överlagrade färdiga stilar kan du använda komplexa övertoningar, fyllningar, inklusive mönster skapade av dig själv. För att få mer effektiva bilder kan du använda filter, både ganska enkla (oskärpa och skuggning) och komplexa (texturering och ljussättning). Rutnät, stödlinjer och linjaler hjälper dig att placera objekt exakt, och det inbyggda verktygsfältet Document Object Model (DOM) presenterar SVG-objekt i en hierarkisk trädvy för enkel hantering.

WebDraw är utrustad med en universell animations storyboard-linje, Animation Timeline, som är byggd på basis av SVG DOM (Document Object Model), som låter dig välja och animera nästan alla attribut eller egenskaper hos ett objekt av alla typer när som helst . Dra-och-släpp-mekanismen låter dig redigera start- och slutpunkterna för animeringen, såväl som varaktigheten för varje animeringsfas, direkt i tidslinjen. Eftersom animeringsnyckeltider infogas varje gång du ställer in animeringsalternativ för ett attribut eller egenskap hos ett objekt, kan de flyttas till andra delar av storyboardet för att automatiska inställningar fördelning av animationseffekter över tid.

Paketet låter dig arbeta med SVG-grafik i två versioner: både med en uppsättning visuellt visade grafiska objekt och med motsvarande källkod. Redigera källkod i den inbyggda SVG-filtextredigeraren ger ytterligare flexibilitet och kontroll över filinnehållet. Automatisk kontrolländringar i källkoden hjälper till att säkerställa korrekt beteende hos den skapade grafiken, och de fel som hittas är markerade i färg, vilket besparar designern från timmars sökning genom hundratals rader kod. Resultatet av eventuella ändringar i källkoden visas omedelbart på skärmen. Om så önskas kan du importera, redigera och optimera SVG-filer skapade i andra applikationer till WebDraw.

Sketsa SVG Editor 3.2.3

Utvecklare: KIYUT

Distributionsstorlek: 5,99 MB

Distributionsmetod: shareware (demo som lägger till en tagg till en bild, http://www.kiyut.com/products/sketsa/sketsa.zip)

Pris: 49 USD

Arbeta under kontroll: Windows 2000/XP, Java VM (JRE) 1.5 och högre (http://www.java.com/getjava), UNIX och Linux

Sketsa-applikationen (fig. 9) är en av de mest populära SVG-redigerarna och låter dig skapa professionell SVG-grafik, inklusive optimering i SVGZ-formatet. Paketet kombinerar framgångsrikt enkelhet och användarvänlighet med ett brett utbud av funktioner och är kompatibelt med Windows, Mac och Linux-system.

Sketsa stöder en klassisk uppsättning verktyg som är typiska för alla vektorapplikationer, vilket gör att du kan skapa och transformera alla vektorobjekt baserat på både konturer och grafiska primitiver och text, som om så önskas enkelt kan kompletteras med rasterbilder. Du kan styra transparens, använda gradientfyllningar och filter. Allt detta kompletteras framgångsrikt med specialiserade SVG-funktioner, tack vare vilka alla bilder kan redigeras inte bara visuellt utan också i textläge. För att redigera SVG-kod har paketet en inbyggd XML-textredigerare. För att underlätta objekthanteringen finns det ett inbyggt verktygsfält för Document Object Model (DOM), som är en hierarkisk trädliknande uppsättning objekt i ett SVG-dokument, som låter dig välja vilket dokumentobjekt som helst för att redigera dess egenskaper.

Mest populär grafiska redaktörer låter dig spara bilder i flera format. Om programmet fungerar med rastergrafik, erbjuds rasterformat för att spara filer; om med vektorgrafik, alltså vektorformat. Det finns dock rasterredigerare som stöder export av ritningar till vektor- och blandade format. Sådant är till exempel Adobe Photoshop som kan exportera en ritning till SVG – ett ganska vanligt format idag som kan lagra både raster- och vektorgrafik.

Vad är SVG-formatet och var används det?

Utvecklad 2001 av konsortiet World Wide Web, SVG-formatet är inte exakt vanligt dokument. Den är baserad på märkningsspråken VML och PGML, det vill säga vi talar i huvudsak om en textfil. I det här fallet tolkar redaktörer och webbläsare SVG som en bild, som kan vara antingen statisk eller animerad. Eftersom SVG är det vanligaste bland andra format utformade för att lagra vektorgrafik, används för närvarande aktivt för att lagra och distribuera vektor- och blandade bilder på Internet.

Som alla format har SVG sina för- och nackdelar. De första inkluderar skalbarhet utan kvalitetsförlust, relativt låg vikt, möjligheten att integrera PNG-, GIF-, JPG-bilder i SVG-dokument, redigering (om du har lämplig erfarenhet) i textredigerare, indexering av sökrobotar, stöd för animering och prevalens . Till fördelarna med formatet hör också god komprimerbarhet, öppenhet och anpassningsförmåga.

Å andra sidan ärver SVG sina brister med alla åtföljande. Formatet är inte väl lämpat för att skapa komplexa objekt, eftersom SVG-filer snabbt ökar i vikt om de består av många små delar. Dessutom behöver program läsa hela dokumentet för att visa en bild, vilket gör formatet svårt att använda i kartapplikationer. Bland nackdelarna med formatet noterar vi den relativt låga kompatibiliteten för flera webbläsare och avsaknaden av åtminstone minimalt stöd för 3D-grafik.

De bästa redigerarna för att arbeta med SVG-filer

Som redan nämnts kan du redigera en SVG-fil i en vanlig textredigerare, men för att göra detta behöver du ha specifik kunskap. Det är mycket bekvämare och mer korrekt att använda vektorgrafikredigerare.

Adobe Illustrator

Det mest funktionella verktyget som är perfekt för rollen som SVG-redigerare. Adobe Illustrator har en imponerande uppsättning verktyg för att arbeta med vektorgrafik och kombinerad grafik. Det låter dig skapa och redigera både enkla skisser och komplexa konstnärliga illustrationer. När du arbetar med SVG-formatet tillåter redigeraren användning av lager och skriptspråk, och användning av specialeffekter.

Boxy SVG

Du kan också öppna SVG-bilder med hjälp av Boxy SVG-applikationen speciellt skapad för att arbeta med detta format. Denna editor är på många sätt underlägsen Adobe Illustrator, men du hittar allt i den grundläggande verktyg för att skapa och redigera SVG-bilder. Applikationen stöder arbete med former och objekt, import av typsnitt och bilder av populära format, arbete med Pixabay-biblioteket, visning och redigering av SVG- och CSS-källkod. Boxy SVG är tillgänglig som en onlinetjänst och som en applikation för Windows 10, MacOS och Chrome OS.

Vectr

Hur kan du annars öppna en SVG-fil? För att arbeta med filer av den här typen finns det ett program som heter Vectr, som klarar de redigeringsuppgifter som är tilldelade det mycket bra. Applikationen erbjuder funktioner som att ändra enskilda delar av en vektorbild, arbeta med lager, lägga till text och primitiver, tillämpa effekter (till exempel transparens, streck, yttre och inre skugga), användning av gradienter, penna, linjer och andra verktyg. Verktyget Vectr är gratis, och det finns versioner för Windows, Linux och Chrome OS.

Inkscape

Till skillnad från de två föregående programmen behöver Inkscape inte mycket introduktion. Den här är kraftfull och fullständig gratis redaktör kan användas för att redigera och skapa vektorgrafik av vilken komplexitet som helst, från SVG-ikoner till fullfjädrade illustrationer. Inkscape kan arbeta med banor, text, markörer, lager och kanaler, gradienter och texturer. Stöder även vektorisering av rastergrafik, SVG-färghantering och mycket mer.

Förresten, du kan ändra färgen på SVG genom att redigera filens källkod, men för att göra detta måste du ha åtminstone en grundläggande förståelse för CSS-språket och färgkoder. Genom att redigera till exempel stilparametern i kodblocket som markerats i skärmdumpen ersatte vi den vita färgen med röd. Och så, naturligtvis, om du redigerar SVG med något, då Inkscape och liknande program.

Hur man öppnar SVG online

Om du behöver en SVG-redigerare online, använd webbversionerna av Boxy SVG, Vectr och Inkscape. Den funktionella uppsättningen av sådana utgåvor är nästan identisk med den för skrivbordsversionerna. Inkscape-applikationen kan till exempel köras som en del av projektet www.rollapp.com/app/inkscape.

Om du letar efter något enklare, prova online vektorredigeraren Sketchpad, tillgänglig på sketch.io/sketchpad. Sketchpad har verktyg som penslar, linjer, pilar, primitiver, clipart, penna, krita, airbrush, fill, etc. Det arbetas med lager, paletter och övertoningar.

Men tjänsten lämpar sig inte för att skapa SVG-bilder från början, även om den stöder ritfunktionen i fritt format. Redaktören riktar sig till nybörjare, så att du enkelt kan lista ut det.

SVG till PNG-omvandlare

Du kan se en SVG-fil som en vanlig bild genom att helt enkelt dra den till webbläsarfönstret, men det händer också att ett SVG-dokument behöver konverteras till ett mer tillgängligt och välbekant grafiskt format, till exempel PNG. Om konverterbara filer mycket, är det vettigt att använda det kostnadsfria verktyget SVG2PNG, som låter dig konvertera SVG till PNG in batch-läge. För att konvertera SVG till PNG, starta verktyget, dra vektorfiler till dess fönster, klicka på "Start" och få resultatet.

Om du har installerat på din dator antivirusprogram Burk skanna alla filer på din dator, såväl som varje fil individuellt. Du kan skanna vilken fil som helst genom att högerklicka på filen och välja lämpligt alternativ för att skanna filen efter virus.

Till exempel, i denna figur är det markerat filen min-fil.svg, då måste du högerklicka på den här filen och välja alternativet i filmenyn "skanna med AVG". När du väljer det här alternativet öppnas AVG Antivirus och genomsöker filen efter virus.

Ibland kan ett fel uppstå som ett resultat felaktig programvaruinstallation, vilket kan bero på ett problem som uppstod under installationsprocessen. Detta kan störa ditt operativsystem länka din SVG-fil till rätt program, påverka den sk "filtilläggsassociationer".

Ibland enkelt ominstallation av No Cash GBA (No$GBA) kan lösa ditt problem genom att korrekt länka SVG till No Cash GBA (No$GBA). I andra fall kan problem med filassociationer härröra från dålig mjukvaruprogrammering utvecklare och du kan behöva kontakta utvecklaren för ytterligare hjälp.

Råd: Prova att uppdatera No Cash GBA (No$GBA) till den senaste versionen för att säkerställa att du har de senaste patcharna och uppdateringarna.

Detta kan verka för uppenbart, men ofta SVG-filen i sig kan orsaka problemet. Om du fått filen via en bilaga E-post eller laddade ner den från en webbplats och nedladdningsprocessen avbröts (till exempel ett strömavbrott eller annan orsak), filen kan skadas. Om möjligt, försök att få en ny kopia av filen SVG och försök öppna den igen.

Försiktigt: En skadad fil kan orsaka extra skada på en tidigare eller befintlig skadlig programvara på din PC, så det är mycket viktigt att alltid ha ett uppdaterat antivirusprogram igång på din dator.

Om din fil är SVG relaterad till hårdvaran på din dator för att öppna filen du kan behöva uppdatera drivrutiner associerad med denna utrustning.

Det här problemet vanligtvis förknippas med mediafiltyper, som är beroende av att man lyckas öppna hårdvaran inuti datorn, t.ex. ljudkort eller grafikkort. Om du till exempel försöker öppna en ljudfil men inte kan öppna den kan du behöva göra det uppdatera drivrutiner för ljudkort.

Råd: Om när du försöker öppna en SVG-fil får du .SYS-fil felmeddelande, problemet kan förmodligen vara associerade med skadade eller föråldrade drivrutiner som behöver uppdateras. Denna process kan göras enklare genom att använda programvara för drivrutinsuppdatering som DriverDoc.

Om stegen inte löser problemet och du fortfarande har problem med att öppna SVG-filer, kan detta bero på brist på tillgängliga systemresurser. Vissa versioner av SVG-filer kan kräva en betydande mängd resurser (t.ex. minne/RAM, beräkningskraft) för att öppnas ordentligt på din dator. Detta problem uppstår ganska ofta om du använder en ganska gammal dator. Hårdvara och samtidigt ett mycket nyare operativsystem.

Det här problemet kan uppstå när datorn har svårt att slutföra en uppgift pga operativ system(och andra tjänster som körs in bakgrund) kan förbrukar för många resurser för att öppna filen SVG. Försök att stänga alla program på din PC innan du öppnar Saved Game File. Genom att frigöra alla tillgängliga resurser på din dator kommer du att ha den bästa möjliga positionen för att försöka öppna filen SVG.

Om du slutfört alla steg som beskrivs ovan och din SVG-fil fortfarande inte öppnas, kan du behöva köra uppdatering av utrustning. I de flesta fall, även när du använder äldre versioner av hårdvara, kan processorkraften fortfarande vara mer än tillräcklig för de flesta användarapplikationer (såvida du inte gör mycket CPU-intensivt arbete, såsom 3D-rendering, finansiell/vetenskaplig modellering eller intensivt multimediaarbete). Således, det är troligt att din dator inte har tillräckligt med minne(kallas oftare "RAM", eller Bagge) för att utföra filöppningsuppgiften.

Från författaren: SVG-bilder är inte lika vanliga som våra favoritrasterformat, PNG och JPG, men fördelarna med vektorgrafik lockar fler och fler designers. Designers använder allt oftare vektorgrafik i sina projekt. Tidigare var vi tvungna att ladda ner skrivbordsapplikationer som Adobe Illustrator och Inkscape, men 2017 kan vi designa vektorgrafik utan att lämna webbläsaren. Om du har letat efter en gratis SVG-redigerare kan du börja med dessa sex gratisverktyg.

Vectr

Vectr – ett bra val för nybörjare och avancerade SVG-användare. Gränssnittet är snyggt och inte belamrat med för många verktyg som du inte kommer att använda. Redaktören är väl lämpad för nybörjare inom vektorillustration. Användaren ska inte gå vilse bland verktyg som inte används för vilket ändamål. Kitet innehåller flera lektioner. Även om du är ny på SVG kan du lära dig snabbt.

Allt ovanstående betyder dock inte att Vectr har dålig funktionalitet. Den har all grunduppsättning för att skapa en vanlig bild: former, text, lager, skuggor, ramar, bakgrunder, etc. Det kan inte jämföras med en fullfjädrad skrivbordsredigerare, men för snabba designs och redigeringar är det mer än tillräckligt. Du kan skapa en bild från början eller ladda upp en befintlig.

Fel kan uppstå när komplexa illustrationer laddas in i Vectr (kartor eller detaljerade diagram). Redaktören hanterar inte alltid komplex grafik bra. Men för enklare SVG (ikoner, logotyper, etc.) kommer denna redigerare att räcka.

JavaScript. Snabb start

Om i onlineversioner Det finns inga funktioner du behöver, du kan ladda ner skrivbordsversionen av applikationen. Editorn är tillgänglig för Windows, Mac, Linux och Chromebook.

Den kanske coolaste funktionen i Vectr är att du kan länka och bädda in bilder direkt från Vectr-webbplatsen, vilket gör den till en effektiv SVG-värd. Många tjänster blockerar nedladdningen av SVG-filer, så detta är ett stort plus. Du kan visa SVG-bilder från Vectr på avlägsna webbplatser som WP, Medium, Tumblr, etc. som blockerar direkt SVG-laddning men tillåter att den visas på distans.

Vectr låter dig dela vektorgrafik i redigeringspanelen så att andra användare kan ändra grafiken du skapar. Det vill säga att du till exempel kan göra en SVG-logomall som användarna kan anpassa efter eget tycke. Allt detta i webbläsaren.

För detta ändamål släppte Vectr nyligen en version av editorn i formuläret plugin för WP.

RollApp

Till skillnad från andra verktyg på listan, när du går till startsida RollApp, redigeraren öppnas inte framför dig. RollApp är en svit med applikationer, och SVG-redigeraren är bara en av applikationerna. Bra verktyg, detta är webbläsarversionen Inkscape.

För att använda RollApp behöver du ett konto. Du kan registrera en ny eller logga in med använder Google, Facebook, Amazon. Mycket bekvämt, jag hatar att skapa tusentals nya konton bara för att se appen.

Inkscape när den är som bäst! Utan tvekan är RollApp den mest funktionsrika applikationen på listan. Du använder bokstavligen Inkscape i din webbläsare! Jag har inte jämfört varje detalj, men den här appen verkar ha ALLA Incscapes funktioner som lager, objekt, text, sökvägar, filter, effekter, tillägg, etc.

Stora filer bearbetas inte lika snabbt, eftersom åtgärder utförs på applikationsservrar och över Internet. Kort sagt – om du behöver redigera stora och komplexa filer så gör inte RollApp det idealiskt alternativ, men för andra uppgifter som inte ingår i grunduppsättningen är denna editor bättre lämpad än andra.

BoxySVG

Om du har läst SitePoint länge bör du vara bekant med editorn BoxySVG, för under de senaste 12 månaderna har vi redan pratat om honom. Jag kommer inte att göra en detaljerad granskning, eftersom detta redan har gjorts i Denna artikel.

JavaScript. Snabb start

Lär dig grunderna i JavaScript med ett praktiskt exempel på hur du skapar en webbapplikation.

Det som är viktigt är att sedan Alex granskning har BoxySVG lagt till en kodinspektör, vilket gör det till ett av de mest relevanta SVG-verktygen för webbutvecklare.

Janvas

För några år sedan Janvas var en mycket populär SVG-redigerare. Tyvärr, Nyligen Den här editorn utvecklas inte, men den fungerar fortfarande. Nätet går framåt, men Janvas står stilla, så intresset för det har bleknat. Alex från SitePoint arbetade med det här verktyget lite under 2013-14 (inklusive den betalda versionen) och svarade till och med på frågor ett tag på Google+-sidan. Janvas var ett ganska kraftfullt verktyg.

Det största problemet med Janvas är att det är lite föråldrat. Webbläsare utvecklas och applikationer som inte följer webbläsare blir mindre stabila för varje dag. Janvas har många funktioner: former, text, ritverktyg, banor, masker och lager. Användare på forum säger dock att många av dessa funktioner inte ger önskat resultat.

Det finns goda nyheter - en ny version kommer att släppas i form av en Chrome-applikation. Vi hoppas att de löser problemen.

DrawSVG

Du kanske redan har valt en gratis SVG-redigerare online. Om inte, gå vidare. DrawSVGär en helt kompatibel SVG-redigerare med många funktioner. Jag gillar verkligen att designen av den här applikationen verkligen är skräddarsydd för webben och inte ser ut som en port av en stationär applikation till en webbläsare. Menyn finns till vänster; genom att klicka öppnas en meny på andra nivån, etc.

Med DrawSVG kan du rita, modifiera och rendera objekt. Du kan rita enkla former, det finns Bezier-kurvor, rak och böjd text, många stilar av linjer och fyllningar, etc. SVG kan också exporteras till PNG.

SVG-redigering

SVG-redigering- farfar online-redaktörer vektorgrafik, dök upp i mitten av 2000-talet. Det finns ingen serverfunktion, allt fungerar i webbläsaren. Det är omöjligt att spara ditt arbete utan att lägga till din egen funktionalitet.

Men för en redaktör vars liv började som ett mycket begränsat och obskyrt vektorritningsprogram har SVG-edits funktionalitet kontinuerligt förbättrats.

Med SVG-edit kan du rita enkla former (linjer, rektanglar, cirklar, polygoner, frihandslinjer etc.), använda banor, lager, gradienter, du kan visa och redigera SVG-källor, exportera till PNG, JPEG, BMP , WEBP, etc.

Slutsats

Utöver dessa 6 SVG-redigerare finns det andra, men få erbjuder mer funktionalitet än de fem som visas ovan.

Om du vill göra allvar med SVG och dessa verktyg inte har den funktionalitet du behöver, kan du alltid ladda ner en SVG-redigerare för skrivbordet som Illustrator eller Inkscape. Men för enkelhet, hastighet och flexibilitet erbjuder alla ovanstående redaktörer en användbar uppsättning funktioner.

PS: Du kan också prova Figma. Det är mer ett verktyg för att skapa gränssnitt än en SVG-redigerare. Den har dock en utmärkt uppsättning verktyg och genererar väl optimerad SVG-kod.