Svg på nettet. Introduksjon til skalerbar vektorgrafikk (SVG). !!! Det er viktig at antall poeng stemmer

Hei alle sammen, våre kjære fans av gratis konvertering. I dag har vi et interessant prosjekt på skrivebordet vårt, kodenavnet Scalable Vector Graphics eller SVG for kort. Hvorfor på et fremmedspråk? Slik at ingen skulle gjette.

For å gjennomføre forskningen trenger vi noen materielle ressurser, inkludert en slags fritt konvertibel valuta, muligens rubler.

For det andre trenger vi en dataskjerm, det spiller ingen rolle om det er en stasjonær eller en smarttelefon. Siden du leser denne teksten, betyr det at du allerede har én ressurs. Det gjenstår bare å plage noen av de flinke menneskene som tilfeldigvis er i nærheten og låne noen tusen rubler, eller i verste fall et par hundrelapper.

Alt dette er helt nødvendig for at vi skal forstå hva SVG er og hva som er best å bruke det med.

Skalerbar vektorgrafikk

La oss starte fra det ytre skallet, gå videre til det indre innholdet og så, la oss ikke være redde for dette ordet - la oss trenge inn i selve essensen av fenomenet som studeres.

Som du kanskje har hørt, finnes det to typer grafikk.

• Raster.
• Vektor.

Start med å ta av deg brillene og flytte øynene nærmere den flimrende dataskjermen.

Hva ser du?

Det stemmer – bildet består av millioner av flerfargede prikker. Det er det det er raster. Det er derfor denne typen grafikk kalles "raster".

La oss gå videre til den andre delen av eksperimentet. Tro meg, du vil ha mye mer moro, og kanskje til og med finne deg noen eventyr.

Ta på deg de mest fasjonable klærne dine, ring vennen din eller kjæresten din. Vi skal på nattklubb. For hva? Studer vektorgrafikk.

Når gjestene har varmet seg skikkelig opp i baren og dansen med tamburiner begynner på dansegulvet, trykker DJ-en på en liten knapp og skyer av gjennomskinnelig glyserinrøyk fyller himmelen.

Når røyken tykner nok, trykker DJ-en på en annen knapp. Laserpistolen skytes ut og noe sånt som nordlyset begynner å danse over hodene på den dansende folkemengden.

Dette er vektorgrafikk. Laserstrålen er kontinuerlig og tegner bilder etter algoritmen som er innebygd i dataprogrammet – et digitalt visuelt bilde.

Det er akkurat slik SVG fungerer – det er en digital programvarebeskrivelse av grafiske bilder, farger og deres oppførsel.

Det var ikke for ingenting vi valgte en nattklubb som eksempel. Poenget er at laseren lager sammenhengende linjer, men glyserinrøyk har en spredt, rastertekstur. Det vil si at denne kunstige tåken består av bittesmå væskedråper suspendert i luften, hvorfra en laserstråle reflekteres slik at det dannes visuelle bilder i netthinnene i øynene våre.

På dataskjermer transformeres kontinuerlige vektorer til flerfargede matrisepiksler, og hjernen vår danner i henhold til sin egen algoritme oppfatningen av et jevnt bilde.

Teknologiløsning SVG

Vel, vi har sortert ut det ytre skallet, la oss nå gå videre til den indre essensen av fenomenet. Du kan si - hvorfor trenger vi all denne vitenskapen, det er bedre å si direkte - hvorfor er det nødvendig, denne SVG?

Ta den tiden du trenger. Faktum er at det er teknologi som bestemmer alle ytre effekter. La oss nå fortelle deg en forferdelig hemmelighet. SVG er et søsken til hypertekst-markeringsspråket HTML, som brukes til å lage vakre og dynamiske nettsider.

Det stemmer, en SVG-grafikkfil er en XML-tekstfil fylt med HTML-lignende tagger og data strukturert ved hjelp av XML. Det er logisk å anta at SVG-grafikk kan integreres direkte i HTML-koden til en nettside, formatert ved hjelp av CSS-stilark, og til og med inkludert Javascript-programmeringsskript.

Bare la fantasien løpe løpsk (kanskje en cappuccino, takk) og prøv å gi de uendelige mulighetene med vektorgrafikk genmodifisert med HTML5-tagger.

1. For det første skaleres vektorgrafikk, per definisjon, uten tap i bildekvalitet (fordi det ikke er piksler, og når det forstørres, vil bildet ikke bli til et maleri av en kubistisk kunstner).
2. For det andre er SVG fullt kompatibel med nettteknologier og blir derfor en organisk del av nettsider.
3. For det tredje, ved å legge til objekter i den digitale beskrivelsen av bildet og koble Javascript-skript til dem, gjør vi bildet interaktivt, det vil si respons på visse brukerhandlinger med gitte svar.
4. For det fjerde er SVG et tekstformat, slik at du kan optimalisere filen for SEO uten eksterne metakoder ved å skrive inn nøkkelord direkte i bildekoden.

Basert på disse tekniske spesifikasjonene vil vi utlede omfanget av SVG.

Hvordan du kan bruke SVG til din fordel

I prinsippene for rettferdig markedsføring må det innrømmes at SVG har sine ulemper. Når bildedetaljene øker, begynner filvekten å øke med hastigheten til et snøskred.

Så, dessverre, er SVG helt uegnet for realistiske høyoppløselige fotografier og detaljerte terrengkart.

SVG-formatet er optimalt for små, men skalerbare og interaktive bilder.

• Navigasjonslinjer og knapper med animerte effekter.
• Logoer som ikke mister bildekvaliteten når de forstørres eller forminskes.
• Bilder som er som gummi tilpasser seg alle formater og oppløsninger på en dataskjerm. SVG er uunnværlig for responsive mobilvennlige nettsteder.

Mest nyttig – SVG-grafikk er best egnet for e-handel.

For eksempel legges et bilde av produktet som selges ut på nettsiden til en nettbutikk. Brukeren kan klikke på individuelle deler av bildet og en vakker animasjon starter som gjør bildet til noe annet.

På dette grunnlaget kan du utvikle en interaktiv oversikt over produktet fra alle sider og til og med fra innsiden.

Eller på et medisinsk nettsted, ved å bruke et slikt grafisk program, kan du gjøre en graviditetstest. Eller en diagnostisk plugin for de som ønsker å gjennomgå en rask analyse og finne ut hva de vil dø av unge.

Etter at klienten har lært den forferdelige hemmeligheten om sin forferdelige sykdom, strekker hånden seg selv ut for å klikke med musen på den tilstøtende delen av SVG-bildet med den røde knappen "Kjøp en kur mot alle sykdommer." En tablett er nok. Pris $1000.

For en nyttig oppfinnelse denne SVG er.

Metoder for konvertering til SVG

På nettsiden vår tilbyr vi konvertering ved hjelp av ulike metoder:

Er det noen måte å redusere størrelsen på SVG?

Ja! Ved å bruke spesielle programmer som SVGO, eller på vår nettside ved å bruke SVG-optimaliseringsfunksjonen.

Tjenesten vår er bygget på bruk av åpne komponenter, spesielt SVGO. Med denne SVG-optimereren kan du redusere størrelsen på SVG-bilder ved å fjerne unødvendig informasjon, for eksempel:

• fjerne attributter fra nye linjer og gjenta objekter;
• slette dokumenttypebeskrivelse;
• fjerning av XML-instruksjoner;
• slette kommentarer;
• fjerne metadata;
• og annen informasjon.

Vektorgrafikk er mye brukt i utskrift. Men vi kan også bruke det for nettsteder som bruker SVG ( Skalerbar vektorgrafikk - skalerbar vektorgrafikk). I følge W3.org-spesifikasjonen er SVG definert som:

Et språk for å beskrive todimensjonal grafikk i XML. SVG tillater tre typer objekter: vektorgrafikk (som baner som består av rette linjer og kurver), bilder og tekst.

Til tross for at SVG har vært inkludert i W3C-anbefalingene siden august 2011, brukes denne teknologien praktisk talt ikke i nettprosjekter, selv om den har en rekke fordeler fremfor rasterbilder. I denne leksjonsserien vil vi introdusere hvordan du arbeider med SVG-elementer på nettsider.

Fordeler med SVG

Resolusjon uavhengighet

Rasterbilder er oppløsningsavhengige. Grafikken får et lite presentabelt utseende når du endrer størrelsen til en viss skala. Med vektorgrafikk er denne situasjonen i prinsippet umulig, siden alt er representert av matematiske uttrykk som automatisk beregnes på nytt når skalaen endres, og kvaliteten opprettholdes under alle forhold.

Redusere antall HTTP-forespørsler

SVG kan bygges inn direkte i et HTML-dokument ved å bruke svg-taggen, slik at nettleseren ikke trenger å gjøre noen forespørsler for å vise grafikken. Denne tilnærmingen har en god effekt på lasteegenskapene til nettstedet.

Stiler og manus

Innebygging med svg-taggen gjør det også enkelt å style grafikken din ved hjelp av CSS. Du kan endre objektegenskaper som bakgrunnsfarge, gjennomsiktighet, kanter og så videre. Grafikk kan manipuleres på en lignende måte ved hjelp av JavaScript.

Enkel å redigere og animere

SVG-objekter kan animeres ved hjelp av CSS eller JavaScript. SVG-objekter kan også endres ved hjelp av et tekstredigeringsprogram.

Mindre filstørrelse

SVG har en mindre filstørrelse sammenlignet med rastergrafikk.

Grunnleggende SVG-former

I henhold til spesifikasjonen kan vi tegne flere grunnleggende former: linje, polylinje, rektangel, sirkel, ellipse. Alle elementer må settes inn i taggen . La oss se på de grunnleggende elementene i detalj.

Linje

For å vise en linje i SVG, bruk elementet . Han tegner et segment der to punkter må bestemmes: begynnelsen og slutten.

Starten på segmentet bestemmes av attributtene x1 og y1, og endepunktet bestemmes av koordinatene i attributtene x2 og y2.

Det er også to andre attributter (strek og strekbredde) som brukes til å definere henholdsvis fargen og bredden på linjen.

Dette objektet ligner på , men bruker elementet Du kan tegne flere linjer samtidig.

Element Inneholder poengattributtet, som brukes til å spesifisere koordinatene til punktene.

Rektangelet tegnes ved hjelp av elementet . Du må bestemme bredden og høyden.

For å vise en sirkel bruker vi elementet . I følgende eksempel lager vi en sirkel med en radius på 100, som er definert i r-attributtet:

De to første attributtene cx og cy definerer koordinatene til sentrum. I eksemplet ovenfor setter vi verdien til 102 for begge koordinatene. Standardverdien er 0.

For å vise en ellipse bruker vi elementet . Det fungerer på samme måte som sirkel, men vi kan spesifikt spesifisere x- og y-radiusene ved å bruke rx- og ry-attributtene:

Element Viser polyedriske former som trekant, sekskant, etc. For eksempel:

Bruke et vektorgrafikkredigeringsprogram

Det er enkelt å skrive ut enkle SVG-objekter til HTML. Men ettersom objektets kompleksitet øker, kan denne praksisen føre til en stor mengde arbeid som kreves.

Men du kan bruke hvilken som helst vektorgrafikkeditor (f.eks. Adobe Illustrator eller Inkscape) for å lage objekter. Hvis du har et verktøy som dette, er det mye enklere å tegne de nødvendige objektene i dem enn å kode grafikk i en HTML-tag.

Du kan kopiere vektorgrafikkkommandoer fra en fil til et HTML-dokument. Eller du kan bygge inn .svg-filen ved å bruke ett av følgende elementer: embed , iframe og object .

Resultatet blir det samme.

Nettleserstøtte

SVG har god støtte i de fleste moderne nettlesere, med unntak av IE versjon 8 og tidligere. Men problemet kan løses ved hjelp av JavaScript-biblioteket. For å gjøre arbeidet ditt enklere kan du bruke ReadySetRaphael.com-verktøyet til å konvertere SVG-kode til Raphael-format.

Først laster vi ned og inkluderer biblioteket i HTML-dokumentet. Deretter laster vi inn .svg-filen, kopierer og limer inn den resulterende koden i funksjonen etter innlasting:

I body-taggen plasserer vi følgende div-element med identifikatoren rsr .

Og alt er klart.

I den neste opplæringen i serien skal vi se på hvordan du kan style SVG-objekter i CSS.

Dette innlegget er det første i en serie artikler om SVG (Scalable Vector Graphic), som dekker det grunnleggende om vektorgrafikk på nettstedet.

Vektorgrafikk er mye brukt i utskrift. For nettsteder er det SVG, som ifølge den offisielle spesifikasjonen på w3.org er et språk for å beskrive todimensjonal grafikk i XML. SVG inkluderer tre typer objekter: former, bilder og tekst. SVG har eksistert siden 1999, og siden 16. august 2011 har det vært inkludert i W3C-anbefalingene. SVG er sterkt undervurdert av webutviklere, selv om det har flere viktige fordeler.

Fordeler med SVG

• Skalering: I motsetning til rastergrafikk, mister ikke SVG kvalitet når den skaleres, så det er praktisk å bruke for utvikling av netthinnen.
• Redusere HTTP-forespørsler: Når du bruker SVG, reduseres antallet anrop til serveren, og nettstedets lastehastighet øker tilsvarende.
• Styling og skripting: Ved å bruke CSS kan du endre grafikkinnstillingene på nettstedet, for eksempel bakgrunn, gjennomsiktighet eller kantlinjer.
• Animasjon og redigering: ved å bruke javascript kan du animere SVG, samt redigere det i et tekst- eller grafikkredigeringsprogram (InkScape eller Adobe Illustrator).
• Liten størrelse: SVG-objekter veier mye mindre enn rasterbilder.

Grunnleggende SVG-former

I henhold til den offisielle spesifikasjonen kan du tegne enkle objekter ved hjelp av SVG: rektangel, sirkel, linje, ellipse, polylinje eller polygon ved hjelp av en tag svg.

Enkel linje med tag linje med bare to parametere - startpunkter (x1 og x2) og sluttpunkter (y1 og y2):

Du kan også legge til strek- og strekbreddeattributter eller stiler for å angi farge og bredde:

Style="stroke-width:1; stroke:rgb(0,0,0);"

brutt linje

Syntaksen er lik den forrige, taggen brukes polylinje, Egenskap poeng setter poeng:

Rektangel

Kalt av rect-taggen, kan du legge til noen attributter:

Sirkel

Kalt av tag sirkel, i eksemplet med attributtet r still inn radius, cx Og cy spesifiser koordinatene til sentrum:

Ellipse

Kalt av tag ellipse, fungerer på samme måte sirkel, men du kan spesifisere to radier - rx Og ry:

Polygon

Kalt av tag polygon, kan en polygon ha et annet antall sider:

Bruke redaktører

Som du kan se fra eksemplene, er det veldig enkelt å tegne grunnleggende SVG-former, men objekter kan være mye mer komplekse. For disse må du bruke vektorgrafikkredigerere, som Adobe Illustrator eller Inkscape, hvor du kan lagre filer i SVG-format og deretter redigere dem i et tekstredigeringsprogram. Du kan sette inn SVG på en side ved å bruke embed, iframe og objekt:

Et eksempel er et bilde av en iPod fra OpenClipArt.org.

Gratulerer med seiersdagen til alle! Og i dag skriver jeg den første artikkelen i en serie der vi skal finne ut av det hva er SVG og hvordan du bruker det.

SVG (Scalable Vector Graphic) er et språk for å beskrive todimensjonal grafikk basert på XML. Denne teknologien får gradvis fart, og dette skyldes følgende:

• Når du endrer størrelsen på svg-former, tegnes figurene alltid på nytt, slik at du alltid vil se et jevnt og vakkert bilde uten pikselering
• Nettleseren trenger ikke å be om bildet fra serveren, fordi han tegner det selv, derfor øker produktiviteten
• Du kan style objekter ved å bruke CSS, som vanlige HTML-elementer, eller ved å bruke JavaScript
• Kan redigeres eller animeres ved hjelp av CSS og JavaScript
• Mindre størrelse

Så jeg tror du allerede forstår hvorfor det er nødvendig og hvorfor det er bedre enn et vanlig bilde, og la oss nå gå videre til hvordan du bruker det.

Til å begynne med er det verdt å merke seg at alle figurene våre må være i taggen svg, la oss nå tegne linje. En tag brukes til å vise linjen linje, som har følgende attributter:

• x1- Start x koordinat
• x2- Slutt x koordinat
• y1- Start y-koordinaten
• y2- Avslutt y-koordinaten
• slagbredde- Linje bredde
• slag- Linjefarge

Men hva om vi trenger å tegne med en gang flere linjer? Bruk flere tagger linje det ville ikke vært veldig hyggelig. Det er en tag for dette polylinje.

Ved lappen polylinje det er et attributt poeng, hvor vi angir koordinatene x Og y atskilt med komma, lag så et mellomrom og skriv koordinatene til neste punkt og så videre. Legg merke til at det er et attributt her fylle, der vi kan spesifisere fargen i alle formatene css, som vil fylle mellomrommet mellom linjene. Hvis du vil at mellomrommet mellom linjene skal være tomt, spesifiser verdien ingen.

La oss gå videre til mer komplekse former og tegne rektangel.

For å tegne et rektangel må du bruke taggen rekt, hvor i attributter bredde Og høyde indikerer bredde Og høyde følgelig, og de resterende attributtene er allerede kjent for deg og utfører absolutt de samme funksjonene som med linjer.

For å tegne en sirkel, bruk taggen sirkel og attributter cx, cy Og r for å sette koordinater sentrum av sirkelen og ham radius.

Et annet element - ellipse tegnes på akkurat samme måte som en sirkel, men der kan vi selv sette radiene langs aksen x og langs aksen y. Taggen brukes til å gjengi den ellipse

Hvis du trenger å trekke deg polyedriske figurer, for eksempel en femkant, bruk deretter taggen polygon

Egenskap poeng ved taggen polygon fungerer på samme måte som attributtet poeng ved taggen polylinje.

Hvis objektet er veldig komplekst, kan du bruke et hvilket som helst vektorgrafikkredigeringsprogram og tegne det der, og så bare sette det inn slik

SVG støttes DVS. c 9 versjoner, Mozilla Firefox Med 1.5 , Google Chrome Med 3.0 Og opera Med 8.0 .

Dette avslutter artikkelen. Det ble stort, men enkelt. I den neste vil vi fortsette å studere denne interessante teknologien, men det er alt. Lykke til!

Dette innlegget er det første i en serie artikler om SVG (Scalable Vector Graphic)-grafikk, som dekker det grunnleggende om vektorgrafikk på nettstedet.

Vektorgrafikk er mye brukt i utskrift. For nettsteder er det SVG, som ifølge den offisielle spesifikasjonen på w3.org er et språk for å beskrive todimensjonal grafikk i XML. SVG inkluderer tre typer objekter: former, bilder og tekst. SVG har eksistert siden 1999, og har vært inkludert i anbefalinger siden 16. august 2011 W3C. SVG er sterkt undervurdert av webutviklere, selv om det har flere viktige fordeler.

Fordeler med SVG

• Skalering: I motsetning til rastergrafikk, mister ikke SVG kvalitet når den skaleres, så det er praktisk å bruke for utvikling av netthinnen.
• Redusere HTTP-forespørsler: Når du bruker SVG, reduseres antallet anrop til serveren, og nettstedets lastehastighet øker tilsvarende.
• Styling og skripting: Ved å bruke CSS kan du endre grafikkinnstillingene på nettstedet, for eksempel bakgrunn, gjennomsiktighet eller kantlinjer.
• Animasjon og redigering: ved å bruke javascript kan du animere SVG, samt redigere det i et tekst- eller grafikkredigeringsprogram (InkScape eller Adobe Illustrator).
• Liten størrelse: SVG-objekter veier mye mindre enn rasterbilder.

Grunnleggende SVG-former

I henhold til den offisielle spesifikasjonen kan du tegne enkle objekter ved hjelp av SVG: rektangel, sirkel, linje, ellipse, polylinje eller polygon ved hjelp av en tag svg.

Enkel linje med tag linje med bare to parametere - startpunkter (x1 og x2) og sluttpunkter (y1 og y2):

Du kan også legge til strek- og strekbreddeattributter eller stiler for å angi farge og bredde:

Style="stroke-width:1; stroke:rgb(0,0,0);"

brutt linje

Syntaksen er lik den forrige, taggen brukes polylinje, Egenskap poeng setter poeng:

Rektangel

Kalt av rect-taggen, kan du legge til noen attributter:

Sirkel

Kalt av tag sirkel, i eksemplet med attributtet r still inn radius, cx Og cy spesifiser koordinatene til sentrum:

Ellipse

Kalt av tag ellipse, fungerer på samme måte sirkel, men du kan spesifisere to radier - rx Og ry:

Polygon

Kalt av tag polygon, kan en polygon ha et annet antall sider:

Bruke redaktører

Som du kan se fra eksemplene, er det veldig enkelt å tegne grunnleggende SVG-former, men objekter kan være mye mer komplekse. For disse må du bruke vektorgrafikkredigerere, som Adobe Illustrator eller Inkscape, hvor du kan lagre filer i SVG-format og deretter redigere dem i et tekstredigeringsprogram. Du kan sette inn SVG på en side ved å bruke embed, iframe og objekt:

Et eksempel er et bilde av en iPod fra OpenClipArt.org:

Nettleserstøtte

SVG støttes av nesten alle moderne nettlesere bortsett fra Internet Explorer 8 og eldre. Men dette kan også fikses ved hjelp av javascript-biblioteket Raphael.js. Du kan konvertere en SVG-fil til dette biblioteksformatet på ReadySetRaphael.com.

Først må du koble Raphael.js-biblioteket til ønsket side, deretter laste ned SVG-filen, kopiere og lime inn den genererte koden i funksjonen:

Window.onload=function() ( //sett inn Raphael-kode her)

Sett inn på side div med attributt rsr.