Det finnes mange bildeformater, men de er alle delt inn i to store klasser – raster og vektor. Førstnevnte brukes hovedsakelig til ulike kompleks og detaljert grafikk, som fotografering. I dem kan hver piksel, det minste elementet, ha sin egen farge, og filen lagrer generelt bare fargene for hvert punkt i bildet. Selvfølgelig brukes forskjellige metoder for å komprimere størrelsen på informasjon, og fra dette er det mange rasterformater - bmp, png, jpg og andre. Vanligvis viser jpg best effektivitet, siden den produserer en liten fil med ganske gode detaljer. Men det har en ulempe - tap av informasjon når du komprimerer informasjon. Derfor, hvis du reduserer filstørrelsen, blir bildet dårligere.

Arbeide med SVG-filer.

Og når du forstørrer slike fotografier, blir piksler synlige. Vektorformater fungerer etter et helt annet prinsipp. De bruker linjer, segmenter og figurer som er beskrevet av matematiske formler. Enhver plass som er begrenset av dem kan fylles med farge eller gradient. Resultatet er et bilde som ikke er bundet til bestemte dimensjoner – det kan enkelt komprimeres eller strekkes til enorme størrelser uten tap av kvalitet. Et slikt vektorformat er SVG. Og det blir mer og mer populært, spesielt i webutviklingsmiljøet.

Generell beskrivelse av utvidelsen

SVG-filtypen er forkortelse for Scalable Vector Graphics, det vil si skalerbar vektorgrafikk. VML- og PGML-markeringsspråk brukes til å beskrive bilder. I hovedsak er dette Tekstdokument, der for hver figur beskrives koordinatene til toppunktene og linjene som går gjennom dem, samt fargene til forskjellige elementer. Den første versjonen av dette formatet ble utgitt i 2001, og en andre versjon er under aktivt utvikling. Det vil si at det er lovende og utviklende. En av fordelene er den lille filstørrelsen, der ganske komplekse tegninger kan lagres. Derfor brukes nå flere og flere ikoner, piktogrammer, logoer og andre nettstedselementer i dette formatet, og ikke i raster. Dette gjør at siden lastes raskere. De unike egenskapene til SVG-formatet inkluderer interaktivitet og animasjon. Den første lar bildet svare på brukerhandlinger, for eksempel å klikke med musen eller flytte noen elementer. Animasjon lar deg lage ganske komplekse scenarier. Alt sammen lar deg lage veldig vakre og livlige grafiske elementer for nettsider. De kan til og med bygges inn i vanlige rasterbilder i png, jpg og andre formater.

.SVG filtype

På Internett kan du finne mange slike bilder på fotoaksjer, inkludert gratis. De er laget i grafiske redaktører Adobe Photoshop, Illustrator, Corel Draw og noen andre. Men spørsmålet oppstår - hvordan åpner du SVG-formatet. Tross alt viser ikke de innebygde Windows-verktøyene hvilke bilder de inneholder. Selv om du kan redigere SVG selv i tekstredigerer, for eksempel i Notisblokk, fordi det er et tekstdokument, men for dette må du ha betydelig kunnskap i markup-språk. Du kan åpne en SVG-fil enten i programmet den ble opprettet i, eller i et annet grafisk redigeringsprogram som støtter dette formatet. Mest populær:

Selvfølgelig er disse navnene en liste over programmer for å jobbe med vektorgrafikk er ikke utslitt. Det er mange av dem, inkludert den mest populære editoren, Adobe Photoshop, som kan lagre bilder som vektorer og har en plugin for å åpne dem. Ikke glem den mest populære redaktøren vektorgrafikk Corel Draw, som kan kalles den mest populære.

Hva annet kan forårsake problemer med filen?

Vanlig bruker Windows, og mange andre operativsystemer, åpnes ikke SVG-filer. For å se innholdet, langt mindre redigere det, må du installere et hvilket som helst grafisk redigeringsprogram som støtter dette formatet.

For å designe en hvilken som helst nettside trenger du både statisk grafikk og en rekke animerte og interaktive elementer, som for det første gjør informasjonen som presenteres på den mer attraktiv, og for det andre bidrar til en bedre oppfatning av materialet.

Grafisk informasjon overføres mye langsommere enn tekstinformasjon, og innlastingstiden til bilder er direkte avhengig av størrelsen på grafikkfilene deres, så rask innlasting av nettsider forutsetter den lille størrelsen på de grafiske bildene som er innebygd i dem. Sistnevnte oppnås ved optimalt valg format grafisk fil, samt gjennom optimalisering, hvis oppgave er å finne et kompromiss mellom sidelastingshastigheten og kvaliteten på bildene som presenteres på den. Optimaliseringsmulighetene er imidlertid ikke ubegrensede, og bilder av høy kvalitet har en tendens til å ha et imponerende volum, slik at Høy kvalitet av bilder presentert på nettet i deres små størrelser er fortsatt et alvorlig problem.

Men spørsmålet handler ikke bare om størrelse og kvalitet; å utvikle et design for en nettside viser seg å være en sak som krever at designeren kjenner til et bredt spekter av forskjellige teknologier og programvareprodukter, siden for ulike typer grafisk informasjon du må bruke en rekke filformater og forskjellige teknologier for å lage dem. For statisk grafikk brukes GIF-, JPG- eller PNG-formater, som kan lages i en rekke grafikkpakker. For animerte objekter brukes animasjonsformatene GIF og Flash, og slike objekter utvikles i spesialiserte programvareapplikasjoner (spesifikke for hver av disse formattypene). Interaktive elementer (rollovers, ImageMap-lenker, etc.) er også, som regel, laget i spesialiserte applikasjoner og representerer et sett med grafiske bilder, forbindelsen mellom disse er etablert i en fil med HTML-kode som utfyller dem.

En vellykket løsning på disse problemene kan være overgangen til SVG (Scalable Vector Graphics scalable vector graphics) grafisk format, basert på XML-språket, takket være hvilket ethvert SVG-bilde kan representeres som et sett kommandolinjer(Fig. 1), og selve SVG-filen kan åpnes i et hvilket som helst tekstredigeringsprogram, inkludert Notisblokk. Denne er forholdsvis ny teknologi ble opprinnelig utviklet av Adobe spesielt for nettet, og er i dag av stor interesse for mobile enheter, og gir skapelse av høykvalitets statisk, animert og interaktiv grafikk. Derfor er det ikke overraskende at det støttes aktivt av W3C-konsortiet (http://www.w3.org/Graphics/SVG) i 2003, SVG 1.1-standarden ble vedtatt av W3C som en anbefaling, og dette øyeblikket SVG 1.2-spesifikasjonen er under utvikling (http://www.w3.org/TR/SVG12/).

med tilhørende bilde

SVG-teknologi lar deg kombinere tekst, grafikk, animasjon og interaktive komponenter i ett format og er basert på tre typer grafiske bilder: vektorformer, bilder og tekst. Former, som det er vanlig i vektorgrafikk, er representert enten ved rettlinjede og krumlinjede konturer, eller grafiske primitiver (rektangler, ellipser, etc.), og tegninger er importerte rasterbilder. I tillegg støtter SVG-formatet ulike typer animerte (som minner om GIF- og Flash-animasjoner) og interaktive objekter, for eksempel rollovers, lenkekart og andre navigasjonselementer. Og siden denne standarden er basert på XML-språket, kan SVG-filen, sammen med elementer beregnet for visuell visning, også inneholde ulike metadata.

Fordeler og ulemper med å bruke SVG-formatet

Ved å bruke SVG-formatet kan du utvikle mindre, raskere lastende, høykvalitets, allsidig grafikk for nettet og mobile enheter som ingen andre grafikkformater kan tilby. De viktigste fordelene med SVG-grafikkformatet inkluderer følgende:

• høy kvalitet på bilder uavhengig av størrelse, noe som forklares av vektornaturen til SVG-formatet. Bilder kan forminskes eller forstørres på ubestemt tid uten tap av kvalitet (fig. 2) i samsvar med skjermstørrelsen, som lar deg få bilde av høy kvalitet grafisk informasjon om forskjellige typer enheter (stasjonære datamaskiner, lommedatamaskiner, etc.), og gjør det også mulig å mer nøye undersøke individuelle detaljer dette er viktig, for eksempel når du arbeider med tekniske tegninger;
• mye mindre størrelse filer sammenlignet med GIF-, JPG-, PNG- og animasjons-GIF-formater, og enda mer med Flash-formatet. For eksempel hvis filen ble testet for en artikkel GIF-format, komprimert i LZW-komprimeringsmodus, var 26 KB, størrelsen på den tilsvarende SVG-filen tok 1220 byte, og når den ble komprimert i SVGZ-formatet, var den bare 685 byte.

Men det er ikke bare det. Sammenlignet med tradisjonelle alternativer for grafisk representasjon av nettet, har bruken av SVG-formatet mange andre ubestridelige fordeler.

Så for utviklere er de viktige fordelene:

• evnen til å kombinere statiske, animerte og interaktive elementer i ett format, samt en kombinasjon av vektor- og rasterobjekter;
• forbedret teksthåndtering, inkludert kerning, buet tekst og ubegrenset skriftbruk;
• mer effektiv kontroll av fargenøyaktighet og større muligheter for å bruke gradientfyll i nettbilder høy oppløsning, skygger, filtre, etc.;
• den tekstlige naturen til SVG-formatet og dets støtte for cascading stilark, noe som i stor grad forenkler prosessen med å oppdatere et nettsted og lar om nødvendig gjøre endringer i det uten å ty til spesielle programmer;
• integrasjon med databaser bygget på XML (Extensible Markup Language) og CSS (Cascading Style Sheets) standarder, som lar deg lagre SVG-bilder i databasen og lage ved hjelp av dem dynamiske nettsider forskjellig for forskjellige plattformer, personlige innstillinger osv.;
• ingen indekseringsproblemer SVG-filer indekseres av alle søkemotorer (i motsetning til for eksempel SWF-filer).

Brukere vil glede seg over SVG-innhold som lastes raskt inn av høy kvalitet. I tillegg er det mulig å kopiere teksten som ligger på SVG-bildet, og dermed lagre litt nyttig informasjon til deg selv, samt søke etter tekst i bildet, noe som i noen tilfeller kan være ekstremt nødvendig, for eksempel ved søk etter ønsket navn på et kart eller en tegning.

Men som vanlig, sammen med fordelene, har SVG-teknologien også ulemper, og svært alvorlige.

• SVG-bilder støttes dårlig av nettleserprodusenter. Som et resultat, for å se SVG-grafikk fra nettleseren, blir brukere tvunget til å installere en tredjeparts plugin som gir denne muligheten, for eksempel SVG Viewer fra Adobe. I teorien er dette ikke vanskelig; de tilsvarende pluginene er enkle å installere, gratis, små i størrelse og kan raskt lastes ned fra Internett. I praksis viser alt seg å være mye mer komplisert, siden de fleste Internett-brukere ikke er klar over eksistensen av disse egenskapene og derfor ikke kan se denne typen grafikk uten plugin er det rett og slett ikke synlig. Situasjonen endrer seg imidlertid gradvis, og det siste året har to ledende nettleserutviklere introdusert støtte for SVG-formatet. I vår ga Opera Software ut versjon 8 av Opera-nettleseren, som støtter SVG 1.0 Tiny; i versjonen av Opera 9.0 som dukket opp litt senere, ble delvis støtte for SVG 1.0 Basic-formatet implementert. Den andre utvikleren som inkluderte SVG-støtte var The Mozilla Organization.Mozilla SVG-prosjektmodulen, som gir visning av SVG-grafikk med 1.1-spesifikasjonen, ble inkludert i Firefox 1.5-nettleseren. I tillegg, i midten av 2005, startet utviklerne av Safari-nettleseren som opererer på datamaskiner som kjører Mac OS X aktivt arbeid med å introdusere støtte for SVG 1.1;
• Sammenlignet med andre grafikkformater er SVG-formatet fortsatt dårlig støttet av grafikkprogramvareutviklere, selv om ledende grafikkpakker som Adobe Illustrator, Corel DRAW osv. lar deg eksportere grafikk til SVG-filer. Selvfølgelig kan SVG-filer lages i et hvilket som helst tekstredigeringsprogram, men dette er ikke praktisk med tanke på hastighet og utviklingskostnader. Det er praktisk å redigere en fil i et tekstredigeringsprogram om nødvendig (som forresten bare er mulig hvis du har dyp kunnskap om XML-teknologi), men å lage den fra bunnen av er uklokt, siden det vil kreve overdreven tid og krefter. For å gjøre dette trenger vi enkle og praktiske verktøy for rask visuell utvikling av grafikk i Scalable Vector Graphics-formatet med muligheten til å redigere programkoden som tilsvarer bildet i samme miljø, men det er svært få slike produkter og de er ikke Velkjente.

Som et resultat oppstår en veldig trist situasjon: mange brukere kan ennå ikke se SVG-grafikk på grunn av mangel på støtte for det i nettlesere på riktig nivå, webutviklere utvikler praktisk talt ikke SVG-grafikk, uansett hvor attraktive de måtte være, og programvareutviklere unner ikke webdesignere med en rekke applikasjoner som er spesifikt fokusert på SVG. Resultatet er en ond sirkel: "Hvis det ikke er innhold, trenger folk ikke en SVG-implementering, og hvis det ikke er noen implementering, så er det ikke noe innhold" Det er nøyaktig hvordan situasjonen ble beskrevet i et av W3C-konsortiet møter.

Men du kan se på situasjonen fra den andre siden: støtten fra SVG (men ennå ikke i sin helhet) fra to populære nettlesere, samt interessen for teknologien til kjente utviklere, tyder på at "isen har brutt" og at SVG har en reell sjanse til å bli et av de populære formatene for å presentere nettinformasjon. Denne sjansen øker på grunn av den økende interessen for SVG-teknologi i forhold til mobile enheter, hvor kravene til bildestørrelse og kvalitet er mye høyere. Opera Software, for eksempel, planlegger først å implementere full støtte for SVG-formatet på stasjonære datamaskiner og først deretter overføre det til mobile plattformer. Derfor er det på tide at nettdesignere tenker på å bruke SVG, ellers risikerer de å bli etterlatt i nær fremtid.

Plugins for visning av SVG-grafikk

Som allerede nevnt, for nå, vil de fleste brukere måtte bruke en av de passende pluginene for å se SVG-grafikk i sin helhet i et nettleservindu, hvorav de mest kjente er de gratis modulene Adobe SVG Viewer og Corel SVG Viewer. Den første av dem, Adobe SVG Viewer, kommer som en egen applikasjon, er kompakt og praktisk, fungerer på forskjellige plattformer, støtter et stort antall nettlesere, og er derfor mye mer populær blant brukere. Corel SVG Viewer-applikasjonen er inkludert i Corel Smart Graphics Studio-pakken, men er også tilgjengelig som freeware.

Det finnes andre alternativer for å se SVG-grafikk; du kan for eksempel bruke de tilsvarende modulene fra Amaya (http://www.w3.org/Amaya/), Apache Batik (http://xml.apache.org/ batik)-pakker, KDE KSVG (http://www.kde.org), etc. En fullstendig liste over programmer som gir visning av SVG-bilder er gitt på: http://wiki.svg.org/Viewer_Implementations.

Adobe SVG Viewer

Utvikler: Adobe Systems, Inc.

Distribusjonsstørrelse: 2,25 MB

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

Pris: gratis

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

Nettleserstøtte: Internet Explorer 4.0 eller nyere, Netscape Navigator eller Communicator 4.5 til 4.78 (unntatt 6.x)

Corel SVG Viewer

Utvikler: Corel Corp

Distribusjonsstørrelse: 4,9 MB

Distribusjonsmetode: freeware (modulen kan lastes ned fra: http://www.corel.com/servlet/Satellite?pagename=Corel/Downloads/Details&id=1042152917172)

Pris: gratis

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

Nettleserstøtte: Microsoft Internet Explorer 5.5 og nyere, Netscape Navigator eller Communicator versjoner 4.79, 7.02

Programmer for å lage SVG-grafikk

Alle programmer for å lage SVG-grafikk kan deles inn i tre store grupper. Den første inkluderer populære todimensjonale grafikkpakker som er fokusert på arbeid med vektorgrafikk og som samtidig lar deg eksportere bilder til SVG-formatet. De mest populære av dem er Adobe Illustrator og CorelDRAW; i tillegg støtter slik eksport i en eller annen grad mange andre applikasjoner: AutoCAD, Microsoft Visio osv. Hovedfordelen med denne gruppen applikasjoner er at de har avanserte verktøy for å lage vektorbilder og lar deg oppnå unike effekter gjennom bruken av gjennomsiktighet, gradientfyllinger, ulike filtre osv. Men disse applikasjonene krever seriøs spesialopplæring og er derfor hovedsakelig designet for profesjonelle designere. I tillegg er de stort sett ikke fokusert på SVG-design (selv om de lar deg få grafikk i Scalable Vector Graphics-formatet), samtidig som de gir praktisk visuell oppretting og visning av bilder, tillater ikke disse programmene at de justeres i teksten nivå, som er relevant for SVG-grafikk. Det er også viktig at støtte for Scalable Vector Graphics-formatet ikke er fullt implementert i dem, som et resultat av at ikke alle vektorbildeelementer kan eksporteres til SVG uten feil.

Den andre gruppen av programvareprodukter består av pakker designet eksklusivt for å lage SVG-grafikk. De har mye mindre evner når det gjelder visuell utvikling av vektorbilder, selv om de inkluderer alle nødvendige verktøy. Men de gir praktiske verktøy for å redigere kildekode og lar deg jobbe med SVG-objekter parallelt, både visuelt og på kodenivå, og du kan enkelt bytte mellom disse alternativene for å presentere informasjon. Alle applikasjoner fra denne gruppen er veldig enkle og tilgjengelige og krever ikke mye tid å lære. I tillegg har de relativt små distribusjoner (sammenlignet med applikasjoner i den første gruppen), slik at de kan kjøpes via Internett uten problemer. Imidlertid er det svært få programmer med slike muligheter, og nedenfor vil vi vurdere i detalj bare fire som er av størst interesse og designet for forskjellige kategorier av brukere. MED full liste Programmer som er tilgjengelige for å lage SVG-grafikk, finner du på: http://wiki.svg.org/Design_Tools.

Og til slutt kan den tredje gruppen inkludere alle tekstredigerere, inkludert en vanlig notisblokk. Som nevnt ovenfor er Scalable Vector Graphics-formatet basert på XML-språket, som lar deg lage og redigere SVG-filer på tekstnivå i et tekstredigeringsprogram om nødvendig.

Fullverdige grafikkapplikasjoner som lar deg lage SVG-grafikk

Adobe Illustrator CS2

Utvikler: Adobe Systems, Inc.

Distribusjonsstørrelse: Macintosh-versjon 428,9 MB, Windows-versjon 398,6 MB

Distribusjonsmetode: shareware (en 30-dagers demoversjon av pakken er tilgjengelig på: http://www.adobe.com/products/tryadobe/main.jsp#product=27)

Pris:$665

Arbeid under kontroll: Windows 2000 med Service Pack 3 eller Windows XP, Mac OS X versjoner 10.2.4 til 10.2.7, Java Runtime Environment 1.4.1

Fra og med versjon 9 har Adobe Illustrator (fig. 3) implementert import og eksport av SVG-filer, og på et mye høyere nivå sammenlignet med lignende grafiske applikasjoner. Pakken støtter alle eksisterende SVG-spesifikasjoner, ISO 8859-1, UTF-8 og UTF-16-kodinger, ulike teksteksportalternativer og lar deg eksportere bilder i både vanlig SVG-format og komprimert SVGZ.

I SVG-grafikken som er laget i miljøet, kan du bruke gradienter, gjennomsiktighet, samt en hel serie spesialdesignede SVG-effekter (Effect=>SVG-filtre) i form av ulike skygger, uskarphet osv. Bilder med slike effekter forblir tydelig når den vises i nettleseren med en hvilken som helst forstørrelse. I tillegg til statisk grafikk lar Illustrator deg også lage interaktiv grafikk i SVG-format; for dette formålet er det gitt en spesiell SVG Interactivity-palett (den kan åpnes fra Window=>SVG Interactivity-menyen), der handlinger for interaktive objekter er spesifisert. Det er verdt å merke seg at arbeid med interaktive SVG-elementer i Illustrator krever kunnskap om Java Script og en forståelse av de grunnleggende prinsippene for objektorientert programmering. I tillegg, ved å bruke Scalable Vector Graphics-formatet i dette programmet, kan du lage Dynamic Data-Driven Graphics.

CorelDRAW Graphics Suite 12

Utvikler: Corel Corp.

Distribusjonsstørrelse tiva: 200 MB

Distribusjonsmetode: shareware (demoversjonen kan lastes ned fra nettbutikksider, for eksempel på: http://allsoft.ru/Download.php?ver=17605)

Pris:$290 (Allsoft.ru)

Arbeid under kontroll: Windows NT/2000/XP

Den velkjente applikasjonen for utvikling av profesjonell vektorgrafikk, CorelDRAW (fig. 4), inkludert i CorelDRAW Graphics Suite 12, gir import og eksport i SVG- og SVGZ-formater på et grunnleggende nivå, og kan derfor brukes til å lage statiske og interaktive SVG-grafikk.

til en SVG-fil i CorelDRAW

Applikasjonen støtter ukjente data, attributter og metadata, og gir også muligheten forhåndsvisning SVG-filer i nettleseren før eksport. I tillegg er Unicode-koding mulig for UTF-8 og UTF-16 kodingsmetoder og ulike alternativer for eksport av tekst og punktgrafikkbilder. I siste versjon Betydelig forbedret støtte for eksport av symboler, tekst, skygger, konturer, lag, innebygde binære bilder, etc.

Mayura Draw 4.3

Utvikler: Mayura programvare

Distribusjonsstørrelse: 1,3 MB

Distribusjonsmetode: shareware (demo-versjon http://www.mayuradraw.com/mdraw.zip)

Pris:$39

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

Mayura Draw (fig. 5) et veldig enkelt og billig program for å lage vektorgrafikk designet for den generelle brukeren. De resulterende vektorbildene kan eksporteres til SVG-format om ønskelig, og derfor kan Mayura Draw være en mulig løsning for å utvikle statisk SVG-grafikk. Programmet støtter alle de viktigste vektorgrafikkverktøyene og lar deg få vektorbilder basert på grafiske primitiver, lineære og krumlinjede konturer og tekst. Listen over funksjonene inkluderer praktiske midler for å justere, distribuere og organisere objekter, administrere gjennomsiktighet, bruke guider og linjaler for nøyaktig plassering av objekter, og ulike transformasjoner.

Spesialiserte pakker for å lage SVG-grafikk

EvolGrafiX XStudio 6.1

Utvikler: EvolGrafiX

Distribusjonsstørrelse: 7,25 MB

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

Pris:$449 kommersiell lisens, $249 akademisk lisens

Arbeid under kontroll: Windows 2000/XP

Den profesjonelle pakken XStudio (fig. 6) er et praktisk verktøy for å lage mangfoldig SVG-grafikk for nettet og mobile enheter og gir full kontroll over både SVG-prosjektet som helhet og over vektorbilder, animasjoner, skript osv. Applikasjonen er praktisk, intuitiv og enkel å tilpasse brukergrensesnitt, gir et bredt spekter av verktøy, har høy hastighet fungerer, lar deg lage SVG-grafikk med alle eksisterende spesifikasjoner og støtter alle skalerbare vektorgrafikkstiler. Alt dette, kombinert med en relativt lav pris for en profesjonell pakke, gjør at vi kan vurdere det som den beste profesjonelle løsningen i sitt slag. XStudio kommer med detaljert dokumentasjon, støttet av en rekke opplæringsprogrammer, og er lett å lære.

Ris. 6. Kombinere visuell bildeoppretting med redigering av kildekode
i EvolGrafiX XStudio

Applikasjonen har alle nødvendige muligheter for å lage og behandle vektorbilder og er i denne forbindelse veldig lik Adobe Illustrator-pakken. Samtidig er XStudio fokusert direkte på utarbeidelse av statisk, interaktiv og animert SVG-grafikk og derfor, sammen med klassiske verktøy for å jobbe med vektorobjekter, er den supplert med spesifikke SVG-funksjoner. Den innebygde Document Object Model (DOM)-verktøylinjen gir en hierarkisk representasjon av SVG-objekter, en praktisk XML-editor lar deg korrigere kildekoden på tekstnivå, og en script-editor lar deg supplere den med Java-skript. Å jobbe med kode er veldig praktisk organisert: kodefragmenter av det valgte objektet utheves automatisk, det er mulig å søke etter tekst og sette bokmerker osv. Eventuelle kodeendringer reflekteres umiddelbart i det visuelle visningsvinduet, og visuelle endringer reflekteres i redigeringsvindu.

Inkscape

Utvikler: IOSN (internasjonalt Åpen kilde Network International Open Source Network)

Distribusjonsstørrelse: 8,7 MB

Pris: gratis

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

Inkscape (fig. 7) det mest lovende vektor editor basert på Open Source-modellen, som er multiplattform og er et kraftig verktøy for å utvikle grafikk i henhold til Scalable Vector Graphics-standarden. med sine egne funksjonalitet arbeider med vektorbilder, så vel som grensesnittet, Inkscape ligner veldig på CorelDRAW. Den støtter alfakanaler, arbeider med lag, bruker flytende tekst, spektakulære gradientfyll, et stort antall filtre og effekter, ulike transformasjoner, praktisk arbeid med konturer og objekter, gruppering av objekter og mye mer. Du kan importere data fra JPEG-, PNG- og TIFF-filer og bygge dem inn i SVG-bilder.

innebygd Inkscape-editor

Imidlertid, i motsetning til CorelDRAW, er Inkscape posisjonert som en applikasjon for SVG-designere, og derfor, sammen med klassisk visuell grafikk, gir den muligheten til å behandle XML-kode direkte i det innebygde tekstredigeringsprogrammet. Programmet er konfigurert til å lagre bilder i vanlige og komprimerte SVG-filer, selv om de kan konverteres til vanlige vektor- og rasterformater om ønskelig.

Inkscape-pakken har et praktisk russifisert grensesnitt, er lett å lære og kommer med et godt hjelpesystem, inkludert ulike eksempler på bruk, og i tillegg, denne søknaden gratis alt dette gjør det veldig attraktivt for et bredt spekter av brukere. De største ulempene med programmet er dets lave driftshastighet og økte krav til systemressurser.

Corel WebDraw

Utvikler: Corel Corp

Distribusjonsstørrelse: 15,6 MB

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

Pris:$179 nedlastingsversjon, $199 CD-versjon

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

Corel WebDraw (figur 8), bedre kjent som Jasc WebDraw, er en omfattende løsning for å lage SVG-grafikk og animasjoner av høy kvalitet rettet mot profesjonelle designere. Og det intuitive grensesnittet til programmet gjør det attraktivt for et bredt spekter av brukere.

Applikasjonen gir et omfattende sett med standard grafiske verktøy som er typiske for en fullverdig vektorgrafikkapplikasjon: grunnleggende former (ellipse, rektangel, stjerne, etc.), penn, polygon, polylinje, tekst, etc. Sammen med vektorobjekter lar WebDraw deg supplere SVG-objekter med eksterne rasterbilder. I tillegg til vanlige fyll og overliggende ferdige stiler, kan du bruke komplekse gradienter, fyll, inkludert mønstre laget av deg selv. For å få mer effektive bilder kan du bruke filtre, både ganske enkle (uskarphet og skyggelegging) og komplekse (teksturering og lyssetting). Rutenett, hjelpelinjer og linjaler hjelper deg med å plassere objekter nøyaktig, og den innebygde DOM-verktøylinjen (Document Object Model) presenterer SVG-objekter i en hierarkisk trevisning for enkel administrasjon.

WebDraw er utstyrt med en universell animasjons storyboard-linje, Animation Timeline, som er bygget på grunnlag av SVG DOM (Document Object Model), som lar deg velge og animere nesten alle attributter eller egenskaper til et objekt av alle typer når som helst . Dra-og-slipp-mekanismen lar deg redigere start- og sluttpunktene for animasjonen, samt varigheten av hver animasjonsfase, direkte i tidslinjen. Fordi animasjonsnøkkeltider settes inn hver gang du angir animasjonsalternativer for et attributt eller egenskap til et objekt, kan de flyttes til andre områder av storyboardet for å automatiske innstillinger fordeling av animasjonseffekter over tid.

Pakken lar deg jobbe med SVG-grafikk i to versjoner: både med et sett med visuelt viste grafiske objekter og med den tilsvarende kildekoden. Redigering av kildekode i den innebygde SVG-filtekstredigereren gir ekstra fleksibilitet og kontroll over filinnhold. Automatisk sjekk endringer i kildekoden bidrar til å sikre riktig oppførsel av den opprettede grafikken, og feilene som er funnet er markert i farger, noe som sparer designeren for timer med søk gjennom hundrevis av linjer med kode. Resultatet av eventuelle endringer i kildekoden vises umiddelbart på skjermen. Om ønskelig kan du importere, redigere og optimalisere SVG-filer opprettet i andre applikasjoner til WebDraw.

Sketsa SVG Editor 3.2.3

Utvikler: KIYUT

Distribusjonsstørrelse: 5,99 MB

Distribusjonsmetode: shareware (demo som legger til en kode til et bilde, http://www.kiyut.com/products/sketsa/sketsa.zip)

Pris:$49

Arbeid under kontroll: Windows 2000/XP, Java VM (JRE) 1.5 og høyere (http://www.java.com/getjava), UNIX og Linux

Sketsa-applikasjonen (fig. 9) er en av de mest populære SVG-redigererne og lar deg lage profesjonell SVG-grafikk, inkludert optimalisering i SVGZ-formatet. Pakken kombinerer med suksess enkelhet og brukervennlighet med et bredt spekter av funksjoner og er kompatibel med Windows, Mac og Linux-systemer.

Sketsa støtter et klassisk sett med verktøy som er typiske for enhver vektorapplikasjon, som lar deg lage og transformere alle vektorobjekter basert på både konturer og grafiske primitiver og tekst, som om ønskelig enkelt kan suppleres med rasterbilder. Du kan kontrollere gjennomsiktighet, bruke gradientfyll og filtre. Alt dette er vellykket supplert med spesialiserte SVG-funksjoner, takket være hvilke ethvert bilde kan redigeres ikke bare visuelt, men også i tekstmodus. For å redigere SVG-kode har pakken en innebygd XML-tekstredigerer. For enkel objektadministrasjon er det en innebygd verktøylinje for Document Object Model (DOM), som er et hierarkisk trelignende sett med objekter i et SVG-dokument, som lar deg velge et hvilket som helst dokumentobjekt for å redigere egenskapene.

Mest populær grafiske redaktører lar deg lagre bilder i flere formater. Hvis programmet fungerer med rastergrafikk, tilbys rasterformater for lagring av filer; hvis med vektorgrafikk, deretter vektorformater. Det finnes imidlertid rasterredigerere som støtter eksport av tegninger til vektor- og blandede formater. Slik er for eksempel Adobe Photoshop, som kan eksportere en tegning til SVG – et ganske vanlig format i dag som kan lagre både raster- og vektorgrafikk.

Hva er SVG-formatet og hvor brukes det?

Utviklet i 2001 av konsortiet Verdensveven, SVG-formatet er ikke akkurat ordinært dokument. Det er basert på VML- og PGML-markeringsspråkene, det vil si at vi egentlig snakker om en tekstfil. I dette tilfellet tolker redaktører og nettlesere SVG som et bilde, som enten kan være statisk eller animert. SVG er det vanligste blant andre formater designet for lagring av vektorgrafikk, og brukes for tiden aktivt til å lagre og distribuere vektor- og blandede bilder på Internett.

Som alle formater har SVG sine fordeler og ulemper. Den første inkluderer skalerbarhet uten tap av kvalitet, relativt lav vekt, muligheten til å integrere PNG-, GIF-, JPG-bilder i SVG-dokumenter, redigering (hvis du har passende erfaring) i tekstredigerere, indeksering av søkeroboter, animasjonsstøtte og prevalens. Fordelene med formatet inkluderer også god komprimerbarhet, åpenhet og tilpasningsevne.

På den annen side arver SVG sine mangler med alle de tilhørende. Formatet egner seg ikke godt til å lage komplekse objekter, siden SVG-filer raskt får vekt hvis de består av mange små deler. I tillegg må programmer lese hele dokumentet for å vise et bilde, noe som gjør formatet vanskelig å bruke i kartapplikasjoner. Blant ulempene med formatet merker vi den relativt lave kompatibiliteten på tvers av nettlesere og mangelen på minst minimal støtte for 3D-grafikk.

De beste redaktørene for å jobbe med SVG-filer

Som allerede nevnt kan du redigere en SVG-fil i et vanlig tekstredigeringsprogram, men for å gjøre dette må du ha spesifikk kunnskap. Det er mye mer praktisk og riktig å bruke vektorgrafikkredigerere.

Adobe Illustrator

Det mest funksjonelle verktøyet som er perfekt for rollen som SVG-redaktør. Adobe Illustrator har et imponerende sett med verktøy for å jobbe med vektorgrafikk og kombinert grafikk. Den lar deg lage og redigere både enkle skisser og komplekse kunstneriske illustrasjoner. Når du arbeider med SVG-formatet, tillater editoren bruk av lag og skriptspråk, og bruk av spesialeffekter.

Boxy SVG

Du kan også åpne SVG-bilder ved å bruke Boxy SVG-applikasjonen, spesielt laget for å jobbe med dette formatet. Denne editoren er på mange måter dårligere enn Adobe Illustrator, men du finner alt i den grunnleggende verktøy for å lage og redigere SVG-bilder. Applikasjonen støtter arbeid med former og objekter, import av fonter og bilder av populære formater, arbeid med Pixabay-biblioteket, visning og redigering av SVG- og CSS-kildekode. Boxy SVG er tilgjengelig som en nettbasert tjeneste og som en applikasjon for Windows 10, MacOS og Chrome OS.

Vectr

Hvordan kan du ellers åpne en SVG-fil? For å jobbe med filer av denne typen finnes det et program som heter Vectr, som takler redigeringsoppgavene som er tildelt det veldig bra. Applikasjonen tilbyr funksjoner som å endre individuelle deler av et vektorbilde, arbeide med lag, legge til tekst og primitiver, bruke effekter (for eksempel gjennomsiktighet, strek, ytre og indre skygge), bruk av gradienter, penn, linjer og andre verktøy. Vectr-verktøyet er gratis, og det finnes versjoner for Windows, Linux og Chrome OS.

Inkscape

I motsetning til de to foregående programmene, trenger ikke Inkscape mye introduksjon. Denne er kraftig og fullstendig gratis redaktør kan brukes til å redigere og lage vektorgrafikk av enhver kompleksitet, fra SVG-ikoner til fullverdige illustrasjoner. Inkscape kan jobbe med baner, tekst, markører, lag og kanaler, gradienter og teksturer. Støtter også vektorisering av rastergrafikk, SVG-fargebehandling og mye mer.

Du kan forresten endre fargen på SVG ved å redigere kildekoden til filen, men for å gjøre dette må du ha minst en grunnleggende forståelse av CSS-språket og fargekodene. Ved å redigere for eksempel stilparameteren i kodeblokken som er markert i skjermbildet, erstattet vi den hvite fargen med rød. Og så, selvfølgelig, hvis du redigerer SVG med noe, så Inkscape og lignende programmer.

Hvordan åpne SVG online

Hvis du trenger en online SVG-editor, bruk nettversjonene av Boxy SVG, Vectr og Inkscape. Det funksjonelle settet til slike utgaver er nesten identisk med skrivebordsversjonene. Inkscape-applikasjonen kan for eksempel kjøres som en del av prosjektet www.rollapp.com/app/inkscape.

Hvis du leter etter noe enklere, prøv den elektroniske vektoreditoren Sketchpad, tilgjengelig på sketch.io/sketchpad. Sketchpad har verktøy som pensler, linjer, piler, primitiver, clipart, penn, fargestift, airbrush, fill, etc. Det jobbes med lag, paletter og gradienter.

Men tjenesten er ikke egnet for å lage SVG-bilder fra bunnen av, selv om den støtter tegnefunksjonen i fri form. Redaktøren er rettet mot nybegynnere, slik at du enkelt kan finne ut av det.

SVG til PNG-konverterere

Du kan se en SVG-fil som et vanlig bilde ved å dra den til nettleservinduet, men det hender også at et SVG-dokument må konverteres til et mer tilgjengelig og kjent grafisk format, for eksempel PNG. Hvis konverterbare filer mye, er det fornuftig å bruke gratisverktøyet SVG2PNG, som lar deg konvertere SVG til PNG inn batch-modus. For å konvertere SVG til PNG, start verktøyet, dra vektorfiler inn i vinduet, klikk "Start" og få resultatet.

Hvis du har installert på datamaskinen antivirusprogram Kan skann alle filer på datamaskinen din, så vel som hver fil individuelt. Du kan skanne hvilken som helst fil ved å høyreklikke på filen og velge riktig alternativ for å skanne filen for virus.

For eksempel, i denne figuren er det uthevet filen min-fil.svg, så må du høyreklikke på denne filen og velge alternativet i filmenyen "skann med AVG". Når du velger dette alternativet, vil AVG Antivirus åpne og skanne filen for virus.

Noen ganger kan det oppstå en feil som et resultat feil programvareinstallasjon, som kan skyldes et problem som oppstod under installasjonsprosessen. Dette kan forstyrre operativsystemet ditt koble SVG-filen til riktig programvare, påvirke den såkalte "filtypetilknytninger".

Noen ganger enkelt reinstallering av No Cash GBA (No$GBA) kan løse problemet ved å koble SVG til No Cash GBA (No$GBA). I andre tilfeller kan det oppstå problemer med filtilknytninger dårlig programvareprogrammering utvikler, og du må kanskje kontakte utvikleren for ytterligere hjelp.

Råd: Prøv å oppdatere No Cash GBA (No$GBA) til den nyeste versjonen for å sikre at du har de siste oppdateringene og oppdateringene.

Dette kan virke for åpenbart, men ofte SVG-filen i seg selv kan forårsake problemet. Hvis du mottok filen via et vedlegg E-post eller lastet det ned fra et nettsted og nedlastingsprosessen ble avbrutt (for eksempel strømbrudd eller annen årsak), filen kan bli skadet. Hvis mulig, prøv å få en ny kopi av SVG-filen og prøv å åpne den igjen.

Forsiktig: En skadet fil kan forårsake sideskade på en tidligere eller eksisterende skadevare på PC-en din, så det er veldig viktig å ha et oppdatert antivirusprogram på datamaskinen til enhver tid.

Hvis filen din er SVG relatert til maskinvaren på datamaskinen din for å åpne filen du kanskje trenger oppdatere enhetsdrivere knyttet til dette utstyret.

Dette problemet vanligvis assosiert med mediefiltyper, som er avhengig av vellykket åpning av maskinvaren inne i datamaskinen, f.eks. lydkort eller skjermkort. For eksempel, hvis du prøver å åpne en lydfil, men ikke kan åpne den, kan det hende du må oppdatere drivere for lydkort.

Råd: Hvis når du prøver å åpne en SVG-fil får du .SYS-fil feilmelding, problemet kan nok være assosiert med ødelagte eller utdaterte enhetsdrivere som må oppdateres. Denne prosessen kan gjøres enklere ved å bruke driveroppdateringsprogramvare som DriverDoc.

Hvis trinnene ikke løser problemet og du fortsatt har problemer med å åpne SVG filer, kan dette skyldes mangel på tilgjengelige systemressurser. Noen versjoner av SVG-filer kan kreve en betydelig mengde ressurser (f.eks. minne/RAM, datakraft) for å åpne riktig på datamaskinen. Dette problemet oppstår ganske ofte hvis du bruker en ganske gammel datamaskin. Maskinvare og samtidig et mye nyere operativsystem.

Dette problemet kan oppstå når datamaskinen har problemer med å fullføre en oppgave fordi operativsystem(og andre tjenester som kjører inn bakgrunn) kan bruker for mange ressurser til å åpne SVG-filen. Prøv å lukke alle programmer på PC-en før du åpner Saved Game File. Ved å frigjøre alle tilgjengelige ressurser på datamaskinen din vil du være i best mulig posisjon til å prøve å åpne filen SVG.

Hvis du fullførte alle trinnene beskrevet ovenfor og SVG-filen fortsatt ikke åpnes, kan det hende du må kjøre utstyrsoppdatering. I de fleste tilfeller, selv når du bruker eldre versjoner av maskinvare, kan prosessorkraften fortsatt være mer enn tilstrekkelig for de fleste brukerapplikasjoner (med mindre du gjør mye CPU-intensivt arbeid, for eksempel 3D-gjengivelse, økonomisk/vitenskapelig modellering, eller intensivt multimediaarbeid). Dermed, det er sannsynlig at datamaskinen ikke har nok minne(mer ofte kalt "RAM", eller RAM) for å utføre filåpningsoppgaven.

Fra forfatteren: SVG-bilder er ikke like vanlige som våre favorittrasterformater, PNG og JPG, men fordelene med vektorgrafikk tiltrekker seg stadig flere designere. Designere bruker i økende grad vektorgrafikk i sine prosjekter. Tidligere måtte vi laste ned skrivebordsapplikasjoner som Adobe Illustrator og Inkscape, men i 2017 kan vi designe vektorgrafikk uten å forlate nettleseren. Hvis du har lett etter en gratis SVG-editor, kan du begynne med disse seks gratisverktøyene.

Vectr

Vectr – et godt valg for nybegynnere og avanserte SVG-brukere. Grensesnittet er pent og ikke rotete med for mange verktøy du ikke vil bruke. Editoren egner seg godt for nybegynnere innen vektorillustrasjon. Brukeren skal ikke gå seg vill blant verktøy som ikke brukes til hvilket formål. Settet inneholder flere leksjoner. Selv om du er ny på SVG, kan du lære raskt.

Alt det ovennevnte betyr imidlertid ikke at Vectr har dårlig funksjonalitet. Den har alt det grunnleggende settet for å lage et vanlig bilde: former, tekst, lag, skygger, rammer, bakgrunner, etc. Det kan ikke sammenlignes med en fullverdig skrivebordsredigerer, men for raske design og redigeringer er det mer enn nok. Du kan lage et bilde fra bunnen av eller laste opp et eksisterende.

Det kan oppstå feil når komplekse illustrasjoner lastes inn i Vectr (kart eller detaljerte diagrammer). Redaktøren takler ikke alltid kompleks grafikk godt. Men for enklere SVG (ikoner, logoer, etc.) vil denne editoren være tilstrekkelig.

JavaScript. Rask start

Hvis i nettversjoner Det er ingen funksjoner du trenger, du kan laste ned skrivebordsversjonen av applikasjonen. Editoren er tilgjengelig for Windows, Mac, Linux og Chromebook.

Den kanskje kuleste funksjonen i Vectr er at du kan koble til og legge inn bilder direkte fra Vectr-siden, noe som gjør den til en effektiv SVG-vert. Mange tjenester blokkerer nedlasting av SVG-filer, så dette er et seriøst pluss. Du kan vise SVG-bilder fra Vectr på eksterne nettsteder som WP, Medium, Tumblr, etc. som blokkerer direkte SVG-lasting, men lar det vises eksternt.

Vectr lar deg dele vektorgrafikk i redigeringspanelet slik at andre brukere kan endre grafikken du lager. Det vil si at du for eksempel kan lage en SVG logomal som brukerne kan tilpasse etter eget ønske. Alt dette i nettleseren.

For dette formål ga Vectr nylig ut en versjon av editoren i skjemaet plugin for WP.

RollApp

I motsetning til andre verktøy på listen, når du går til hjemmeside RollApp, redaktøren åpnes ikke foran deg. RollApp er en pakke med applikasjoner, og SVG-editoren er bare en av applikasjonene. Flott verktøy, dette er nettleserversjonen Inkscape.

For å bruke RollApp trenger du en konto. Du kan registrere en ny eller logge inn med ved hjelp av Google, Facebook, Amazon. Veldig praktisk, jeg hater å opprette tusenvis av nye kontoer bare for å se appen.

Inkscape på sitt beste! Uten tvil er RollApp den mest funksjonsrike applikasjonen på listen. Du bruker bokstavelig talt Inkscape i nettleseren din! Jeg har ikke sammenlignet hver detalj, men denne appen ser ut til å ha ALLE Incscapes funksjoner som lag, objekter, tekst, baner, filtre, effekter, utvidelser, etc.

Store filer behandles ikke like raskt, fordi handlinger utføres på applikasjonsservere og over Internett. Kort sagt – hvis du trenger å redigere store og komplekse filer, vil ikke RollApp det ideelt alternativ, men for andre oppgaver som ikke er inkludert i grunnsettet, er denne editoren bedre egnet enn andre.

BoxySVG

Hvis du har lest SitePoint lenge, bør du være kjent med editoren BoxySVG, for i løpet av de siste 12 månedene har vi allerede snakket om ham. Jeg vil ikke gjøre en detaljert gjennomgang, siden dette allerede er gjort i denne artikkelen.

JavaScript. Rask start

Lær det grunnleggende om JavaScript med et praktisk eksempel på hvordan du lager en nettapplikasjon.

Det som er viktig er at siden Alexs anmeldelse har BoxySVG lagt til en kodeinspektør, noe som gjør det til et av de mest relevante SVG-verktøyene for nettutviklere.

Janvas

For et par år siden Janvas var en veldig populær SVG-redaktør. Dessverre, I det siste Denne editoren er ikke under utvikling, men den fungerer fortsatt. Nettet går fremover, men Janvas er stillestående, så interessen for det har falmet. Alex fra SitePoint jobbet litt med dette verktøyet i 2013-14 (inkludert den betalte versjonen) og svarte til og med på spørsmål en stund på Google+-siden. Janvas var et ganske kraftig verktøy.

Hovedproblemet med Janvas er at det er litt utdatert. Nettlesere utvikler seg, og applikasjoner som ikke følger nettlesere blir mindre stabile hver dag. Janvas har mange funksjoner: former, tekst, tegneverktøy, baner, masker og lag. Imidlertid sier brukere på fora at mange av disse funksjonene ikke gir de ønskede resultatene.

Det er gode nyheter - en ny versjon vil bli utgitt i form av en Chrome-applikasjon. Vi håper de løser problemene.

TegnSVG

Du har kanskje allerede valgt en gratis online SVG-editor. Hvis ikke, gå videre. TegnSVG er en fullt kompatibel SVG-editor med mange funksjoner. Jeg liker virkelig at utformingen av denne applikasjonen virkelig er skreddersydd for nettet og ikke ser ut som en port av en skrivebordsapplikasjon til en nettleser. Menyen er plassert til venstre; ved å klikke åpnes en meny på andre nivå osv.

Med DrawSVG kan du tegne, modifisere og gjengi objekter. Du kan tegne enkle former, det er Bezier-kurver, rett og buet tekst, mange stiler av streker og fyll osv. SVG kan også eksporteres til PNG.

SVG-redigering

SVG-redigering- bestefar nettredaktører vektorgrafikk, dukket opp på midten av 2000-tallet. Det er ingen serverfunksjonalitet, alt fungerer i nettleseren. Det er umulig å lagre arbeidet ditt uten å legge til din egen funksjonalitet.

Men for en redaktør hvis liv begynte som et svært begrenset og obskurt vektortegneprogram, har SVG-edits funksjonalitet kontinuerlig forbedret seg.

Ved å bruke SVG-edit kan du tegne enkle former (linjer, rektangler, sirkler, polygoner, frihåndslinjer osv.), bruke baner, lag, gradienter, du kan vise og redigere SVG-kilder, eksportere til PNG, JPEG, BMP , WEBP, etc.

Konklusjon

I tillegg til disse 6 SVG-redaktørene er det andre, men få tilbyr mer funksjonalitet enn de fem som er vist ovenfor.

Hvis du vil gjøre alvor av SVG og disse verktøyene ikke har funksjonaliteten du trenger, kan du alltid laste ned et SVG-redigeringsprogram som Illustrator eller Inkscape. Men for enkelhet, hastighet og fleksibilitet tilbyr alle de ovennevnte redaktørene et nyttig sett med funksjoner.

PS: Du kan også prøve Figma. Det er mer et verktøy for oppretting av brukergrensesnitt enn et SVG-redigeringsprogram. Imidlertid har den et utmerket sett med verktøy og genererer godt optimalisert SVG-kode.