Skalerbar vektorgrafikk

Skalerbar vektorgrafikk
Utvidelse.svg, .svgz
MIME-typeimage/svg+xml
Utviklet avW3C
1. utgivelse4. september 2001
Siste versjon1.1 (andre utgave) (16. august 2011)
FyrVektorgrafikk
Forlengelse avXML
Åpent format ?Jepp
Nettstedwww.w3.org/Graphics/SVG

Skalerbar vektorgrafikk (format i .svg ), indikerer et bestemt format som er i stand til å vise vektorgrafikkobjekter og derfor lagre bilder slik at de kan forstørres og forminskes etter ønske uten å miste grafikkoppløsningen .

Spesielt fungerer svg-formatet i XML , som er en applikasjon av metaspråket basert på utviklingen av nettet av W3C -konsortiet , som har som mål å beskrive statiske og animerte todimensjonale figurer.

Situasjon

SVG ble en (standard)anbefaling fra World Wide Web Consortium i september 2001 etter en ganske blandet prosess. På W3C hadde Macromedia og Microsoft introdusert Vector Markup Language ( VML ), mens Adobe og Sun Microsystems foreslo et konkurrerende format kalt PGML : noe kompromissarbeid var nødvendig for å komme frem til anbefalingen. SVG er naturlig støttet av Amaya nettleser / nettredaktør , av Opera og av Mozilla Firefox fra versjon 1.5. Andre nettlesere for å vise SVG-bilder krever tillegg av en plugin , for eksempel Adobe SVG Viewer eller Corel SVG Viewer .

SVG-bilder kan også sees av frittstående redaktører og seere. En spesiell versjon av Mozilla , kalt "Croczilla", støtter nå noen deler av SVG-standarden, men mye av ytelsen er ennå ikke oppnåelig: i perspektiv bør imidlertid SVG-bilder være synlige uten å legge til noen plug-in. KDE -prosjektets Konqueror -nettleser har også for tiden en ganske komplett SVG-implementering kalt ksvg, og det er å forvente at denne støtten vil bli tilpasset Apple Incs Safari - nettleser i fremtiden . Opera- nettleseren støtter SVG fra versjon 8.5.

Programmer skrevet i Java kan kontrollere visning, generering og manipulering av SVG-grafikk ved hjelp av Batik SVG Toolkit .

Funksjoner

Det er mulig å oppsummere hva som finnes i Oversikten over SVG til W3C-konsortiet.

SVG lar deg håndtere tre typer grafiske objekter:

Grafiske objekter kan grupperes i mer omfattende objekter, utstyrt med stilattributter og legges til tidligere konstruerte og viste grafiske objekter. En tekst kan være en del av et hvilket som helst XML- navneområde som kan sendes til en søknad; denne muligheten øker søkbarheten og tilgjengeligheten til SVG-bilder. Repertoaret av gjennomførbare operasjoner inkluderer nestede transformasjoner , klippebaner , alfamasker , filtereffekter , malobjekter og utvidbarhet .

Tall uttrykt ved hjelp av SVG kan være dynamiske og interaktive. Document Object Model (DOM) for SVG, som inkluderer den komplette XML DOM, muliggjør direkte og effektiv vektorgrafikkanimasjon gjennom ECMAScript- og SMIL -språkene . SVG-grafiske objekter kan tildeles hendelsesbehandlere hentet fra et bredt repertoar: to eksempler med en lett forståelig rolle er onmouseover og onclick . Takket være kompatibiliteten til SVG med andre nettstandarder og takket være gjensidig støtte fra disse mekanismene, kan SVG-elementer og andre XML-elementer på en nettside utstyres med ytelser som skripting hentet samtidig fra forskjellige navnerom .

SVG-systemet konkurrerte med Adobe Flash (avviklet per 31. desember 2020 [1] ) når det gjelder potensial og effektivitet. For en første sammenligning bør det bemerkes at, i motsetning til Flash, er SVG en åpen standard .

Bruk

De fleste tegneprogramvareprodukter som Adobe Illustrator og Corel Draw i nyere versjoner er i stand til å eksportere bilder beskrevet i SVG. OpenOffice.org Draw- pakken fra versjon 1.1 kan også eksportere SVG-filer.

To åpen kildekode- og vektorgrafikkprogrammer på tvers av plattformer som bruker SVG-formatet er Inkscape og Sodipodi .

Skalerbar vektorgrafikk

Potensialet til skalerbar vektorgrafikk er bemerkelsesverdig:

Dette potensialet påvirker praktisk talt alle grafiske applikasjoner som ikke er rent raster , det vil si basert på pikselkart (i praksis bilder fra kameraer eller skanninger ).

På den annen side er den beregningsmessige "vekten" til et vektorbilde generelt høyere enn for rastergrafikk, ettersom dataprosessoren i hovedsak må regenerere bildet fra bunnen av hver gang skjermen endres.

Fordelen med SVG fremfor andre vektorgrafikkformater ligger i dens natur som en åpen standard: på denne måten kan i prinsippet alle som kjenner det lage SVG-sider uten behov for et dedikert kommersielt utviklingsmiljø.

Siden det er et format avledet fra XML , arver det den enkle genereringen med automatiske midler og gjennom programmeringsspråk.

Til slutt , på klientsiden er det mulig å operere på objektmodellen til dokumentet ( DOM ) ved å bruke ECMAScript-kode (standardiseringen av JavaScript definert av ECMA ).

Programmer for å lage svg

Her er en delvis liste over programmer for å generere svg-filer:

HTML5

Med HTML5-standarden har SVG-formatet blitt en del av HTML-språket. En svg kan settes inn som et bilde (".svg"-format) eller via kode. Fra brukerens synspunkt er det på et estetisk nivå det samme. Følgende tre linjer med kode gir det samme estetiske resultatet (en hvit sirkel med en grønn kant), men med tre forskjellige teknikker:

SVG-bilde

< img src = "sirkel.svg" alt = "sirkel" høyde = "200" bredde = "200" />

SVG-kode

< svg width = "100" høyde = "100" > < sirkel cx = "200" cy = "200" r = "93" slag = "# 66CC01" slagbredde = " 4" fyll = "E2FFC6" /> Beklager, nettleseren din støtter ikke innebygd SVG. </ svg >

Lerretskode

function draw () { // tegne det fargede området mainContext.beginPath (); mainContext.arc (200, 200, 93, 0, 2 * Math.PI, true); mainContext.fillStyle = "# E2FFC6"; mainContext.fill (); // tegne streken mainContext.lineWidth = 20; mainContext.strokeStyle = "# 66CC01"; mainContext.stroke (); }

Forskjeller mellom SVG og Canvas

SVG er et språk for å beskrive 2D-grafikk i XML [2] . Canvas tegner 2D-grafikk, i farten (med JavaScript) [3] .

SVG er XML-basert, noe som betyr at hvert element er tilgjengelig i SVG DOM. Du kan legge ved JavaScript-hendelsesbehandlere for et element.

I SVG "huskes" hver tegnet form som et objekt. Hvis attributtene til et SVG-objekt endres, kan nettleseren automatisk gjengi formen på nytt.

Canvas ( også et HTML5-element) gjengis piksel for piksel. Når grafikken er tegnet, blir Canvas "glemt" av nettleseren. Hvis posisjonen må endres, må hele scenen tegnes på nytt, inkludert objekter som kan ha blitt dekket av grafikken [4] .

Canvas er egnet for dynamiske applikasjoner som spill og animasjoner, på grunn av sin raskere og DOM-uavhengige lasting.

Bildene som er opprettet i SVG legges til DOM og kan redigeres via JavaScript og Css , selv med hendelser til stede på de andre elementene i dokumentet [5] .

Funksjoner [6] SVG Lerret
Vektorer JA NEI
Rasterisering NEI JA
DOM-tilgang JA NEI
tilgjengelighet JA Delvis
Tekst JA JA
Gradienter og mønstre JA JA
CSS-animasjoner JA NEI
CSS-filtre JA JA
SVG-filtre JA JA
Videoinkludering NEI JA
Pikselmanipulasjon NEI JA
API-tilgang i JS NEI JA

Tegn

Som med HTML og CSS, kan tekst i SVG referere til eksterne fontfiler, for eksempel systemfonter. Hvis de nødvendige skriftfilene ikke finnes på maskinen der SVG-filen gjengis, kan det hende at teksten ikke vises som forventet. For å overvinne denne begrensningen kan teksten vises i en SVG-font , der de nødvendige glyfer er definert i SVG som en font som deretter beskrives av elementet <text>[7] .

På SEO -siden er SVG-er mer tilgjengelige fordi de støtter tekst [8] som, med mindre den konverteres til baner, kan velges av brukere på en HTML-side og leses av søkemotorer [9] .

Lenker

SVG-bilder kan inneholde hyperkoblinger til andre dokumenter ved å bruke XLink. Gjennom bruk av elementet <view>eller en fragmentidentifikator kan URL-er koble til SVG-filer som endrer det synlige området av dokumentet. Dette lar deg lage spesifikke visningstilstander som brukes til å zoome inn/ut på et spesifikt område eller for å begrense visningen til et spesifikt element. Dette er nyttig når du lager sprites . XLink-holderen i kombinasjon med elementet <use>tillater også tilkobling og gjenbruk av interne og eksterne elementer. Dette lar programmerere gjøre mer med mindre markering og gjør koden renere [10] .

Skripting og animasjon

Før ankomsten av HTML5 var bruken av Adobe Flash (foreldet per 31. desember 2020) den eneste måten å lage vektoranimasjoner og generelt vektorbilder for nettet [11] .

SVG-design kan være dynamiske og interaktive. Animasjonsbaserte endringer kan beskrives i SMIL eller kan programmeres i et skriptspråk (f.eks. ECMAScript eller JavaScript). W3C anbefaler eksplisitt SMIL som standard for SVG-animasjon.

SVG kan også animeres med CSS3 [12] og ECMAScript .

Et rikt sett med hendelsesbehandlere som " onmouseover" og " onclick" kan tilordnes til et hvilket som helst SVG-grafikkobjekt for å bruke handlinger og hendelser [13] .

SVG-animasjon ved hjelp av SMIL < animateTransform attributeName = "transform" attributeType = "XML" type = "roter" fra = "0" til = "360" begin = "0s" dur = "1s" repeatCount = "ubestemt" /> SVG-animasjon ved hjelp av CSS3 < style type = "text / css" > @ keyframes rot_kf { fra { transform : rotate ( 0 grader ); } til { transformere : rotere ( 360 grader ); } } . rot { animasjon : rot_kf 1 s lineær uendelig ; } </ stil > SVG-animasjon ved hjelp av ECMAScript < script type = "text / ecmascript" > function rotate ( evt ) { var object = evt . mål . eierDokument . getElementById ( 'rot' ); setInterval ( function () { var now = new Date (); var milliseconds = now . getTime () % 1000 ; var degrees = milliseconds * 0,36 ; object . setAttribute ( 'transform' , 'rotate (' + degrees + ')' ); }, 20 ); } < /script>

Exif-data

I SVG er det mulig å sette inn Exif -metadata [14] .

< svg xmlns = "http://www.w3.org/2000/svg" xmlns: sol = "https://inkscape.org/it/" > < sirkel cx = "10" cy = "40" sol: country = "Italia" r = "10" /> </ svg >

Rasterbilder i SVG

I svg-koden kan du legge inn eller koble til raster (eller punktgrafikk) bilder som jpg, png eller gif.

Koblet bilde:

< svg ... > < image xlink: href = "/path/to/image.jpg" width = "100%" height = "100%" x = "0" y = "0" /> </ svg >

Innebygd bilde:

< svg > < image y = "130.35181" x = "47.050488" id = "image6820" xlink: href = "data: image / jpeg; base64, / 9j / 4AAQSkZJRgABAQEAlgCWAAD / 2 ../ > </ svg >

Bruke CSS

Du kan bruke CSS til å endre SVG-stiler. Eksempel:

svg { bakgrunnsfarge : beige ; }

Nettlesere som støtter svg- og svgz-format

Her er en liste over nettlesere som i det minste fra den siste tilgjengelige versjonen støtter, i det minste delvis, formatene svg og svgz (komprimert svg);

Støtten for dette formatet er i stadig utvikling, og med rekkefølgen av nye versjoner av de nye nettleserne, utvides kompatibiliteten stadig.

Merknader

  1. ^ Flash og fremtiden for interaktivt innhold | Adobe Blog , på web.archive.org , 2. desember 2017. Hentet 19. januar 2021 (arkivert fra originalen 2. desember 2017) .
  2. ^ - SVG: Skalerbar vektorgrafikk | MDN , på developer.mozilla.org . Hentet 19. januar 2021 .
  3. ^ Legge til vektorgrafikk på nettet - Lær webutvikling | MDN , på developer.mozilla.org . Hentet 19. januar 2021 .
  4. ^ HTML SVG , på w3schools.com . Hentet 19. januar 2021 .
  5. ^ SVG eller Canvas for HTML5-en din? , i Wellnet , 9. mai 2014. Hentet 19. januar 2021 .
  6. ^ Når skal du bruke SVG vs. When to Use Canvas , på CSS-Tricks , 12. november 2019. Hentet 29. januar 2021 .
  7. ^ Fonts - SVG 1.1 (andre utgave) , på w3.org . Hentet 19. januar 2021 .
  8. ^ Når skal du bruke SVG vs. When to Use Canvas , på CSS-Tricks , 12. november 2019. Hentet 19. januar 2021 .
  9. ^ seo - Indekserer søkemotorer tekst som finnes i SVG-elementer? , på Webmasters Stack Exchange . Hentet 19. januar 2021 .
  10. ^ Linking - SVG 1.1 (andre utgave) , på w3.org . Hentet 19. januar 2021 .
  11. ^ Flash og fremtiden for interaktivt innhold | Adobe Blog , på web.archive.org , 2. desember 2017. Hentet 28. januar 2021 (arkivert fra originalen 2. desember 2017) .
  12. ^ Animere SVG med CSS , på CSS - Tricks , 17. april 2014. Hentet 28. januar 2021 .
  13. ^ Paul Festa, W3C gir ut skriptstandard, advarsel , på CNET . Hentet 19. januar 2021 .
  14. ^ - SVG: Skalerbar vektorgrafikk | MDN , på developer.mozilla.org . Hentet 19. januar 2021 .

Relaterte elementer

Andre prosjekter

Eksterne lenker