Lage enkle og komplekse svg. Hva er SVG? Grunnleggende

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!

I dag skal vi snakke om SVG, hva slags format det er, hva det brukes med, og om det er verdt å bruke. Selv om formatet ikke er spesielt nytt, har det fått sin popularitet takket være implementeringen. Alle siste versjoner av nettlesere har allerede mottatt støtte for dette formatet.

Hvorfor er han så populær? Og hva er det egentlig som skiller den fra andre? I dag skal vi svare på disse spørsmålene og også fortelle deg hva du trenger å vite for å komme i gang med å jobbe med disse filtypene.

Hva er SVG?

SVG – Scalable Vector Graphics – er et vektorbasert format for webutviklere. Denne typen format har blitt så populær på grunn av det faktum at bildene kan vises i høye oppløsninger uten tap av kvalitet, siden SVG er et vektorformat.

Drivkraften for utviklingen av dette markup-språket ble først gitt av World Wide Web Consortium, som var bedre kjent i 1999 som W3C. W3C ga konseptet SVG - et markup-språk for å lage todimensjonale grafiske grensesnitt og bilder.

Bruk i praksis

Hva gjør SVG så populært, og hvorfor begynner flere og flere designere å bruke det? Det er veldig enkelt, det fungerer som det skal.

SVG er lett sammenlignet med andre formater. Dette formatet har utrolige muligheter. Flagg, symboler, grensesnittelementer. Og dette er bare en liten liste over hvordan den kan brukes. Den største fordelen med å bruke det er at det er et vektorformat, det vil si at det kan brukes på hvilken som helst skjerm - uansett oppløsning, vil det vises likt overalt.

SVG-filer er ganske enkle å administrere siden filene lagres som et statisk bilde. Du kan legge til interaktivitet på nettstedet ditt ved å lage veldig enkle, men vakre animasjoner ved hjelp av SVG.

Noen få eksempler på hvor det kan brukes:

• Logoer
• Bakgrunnsbilde
• Bruk som en knapp
• Kort
• Diagrammer eller tegninger

Som regel brukes SVG oftest når man lager responsive nettsider, animasjoner og andre dynamiske effekter.

Fordeler med å bruke SVG

Så hvorfor skal vi forlate den vanlige JPG eller GIF til fordel for SVG? Det er ganske mange grunner til at du fortsatt bør bruke det i prosjektet ditt.

• SVG er et vektorformat, og derfor er det verdt å bruke for responsive nettsteder der størrelsen på bilder avhenger av brukerens skjermoppløsning, og SVG passer feilfritt.
• SVG-bilder bruker XML for å definere egenskapene deres, og har derfor muligheten til å bli enda mer komprimert.
• SVG-bilder er veldig enkle å manipulere, og dette åpner for enda flere muligheter for designere som kan endre farger, legge til skygger, filtre, uskarphet og mange flere effekter.
• SVG er ganske enkelt å forstå
• SVG jobber med åpne nettstandarder
• Du kan bruke en vanlig tekstkoderedigerer for å lage SVG. Dette gir deg litt frihet i handlingene dine, alt avhenger av dine behov og nivået av ekspertkunnskap på dette området.

Ulemper med å bruke SVG

Du er sikkert sjokkert over hvor mange fordeler SVG har. Og kanskje trodde de at det ikke hadde noen ulemper. Men nei, det er definitivt et par, og her er noen av dem:

• Det er ingen støtte for eldre nettlesere som Explorer 8 og eldre.
• SVG kan ikke brukes i fotografier da det er et vektorformat og brukes til å lage ulike former og linjer.

Hva blir det neste?

Fremtiden til SVG har så vidt begynt. Som et akseptert bildeformat (og standard) for mobil, vil SVG bare fortsette å få fart.

SVG-filer er skalerbare vektorgrafikkfiler. For å være mer presis er det et språk for å beskrive todimensjonal grafikk. Grunnlaget var XML-markeringsspråket.
Dette formatet har en rekke fordeler: SVG-bilder er vektorbilder og holder kvaliteten uansett hvordan de skaleres eller endres. SVG-bilder støtter interaktivitet og animasjon. SVG er en W3C-standard, noe som betyr at den har god støtte av høy kvalitet. Du kan lage SVG-filer ikke bare i grafiske editorer, men også i et hvilket som helst tekstredigeringsprogram.
XML-baserte SVG-bilder er søkbare, indekserbare og kan skriptes og komprimeres.

Før vi går videre til å tegne uten å tegne, la oss se på strukturen til en tom svg-fil, tilstrekkelig for visning i ethvert program.

1.
2.
3.
4.
5.

For enkelhets skyld er linjene nummerert. Den første linjen inneholder standarderklæringen til XML-dokumentet.
Den andre linjen er en indikasjon på DTD-skjemaet til dokumentet. Den tredje linjen setter størrelsen på det opprettede dokumentet til 600 x 600 piksler. Første tag-attributt
Hvis du åpner en tegning opprettet i inkscape i notepad, kan du finne flere tagger som inkscape oppretter som standard. Hvis du, når du lagrer en tegning, velger en enkel svg, vil filstrukturen være litt annerledes.
La oss gå videre til å lage de grunnleggende formene. Bevæpn deg med en notisblokk og fortsett. Vi sjekker hva vi gjør i inkscape, så vi holder det i gang.

Sirkel.

For å opprette en sirkel, legg til linjen i vår tomme svg-fil
Attributtene er koordinatene til sirkelens sentrum (cx og cy) og dens radius (r). I dette tilfellet ligger opprinnelsen til koordinatene i øvre venstre hjørne av regnearket. Full svg-fil:

En sirkel vil bli opprettet nøyaktig i midten av dokumentet, med en radius på 100 piksler. Siden det ikke var instruksjoner om fyllfarge, strek, lag eller andre effekter, tegnes sirkelen uten strek og fylt med svart, som er det vi ser når vi åpner dokumentet i Inkscape. Vær oppmerksom på at det ikke vil være noen lag i dokumentet.

Attributtbetegnelser cx, cy Og r er standard. La oss sette streken og fyllingen av sirkelen vår, og også sette strektykkelsen til 6 piksler.

fill= "grønn" stroke= "gul" stroke-width= "6"/>

Fyllingen er satt til grønn og streken er satt til gul.

Det som er interessant er at hvis du oppretter et lag i dette dokumentet, kan du se at sirkeltegningen ikke vil være på det opprettede laget, men et sted der? De tilsvarende attributtene er uthevet i rødt. Hvis du trenger å lage en sirkel uten fyll eller strek, sett verdien av det tilsvarende attributtet til ingen

slag= "ingen"

For å endre gjennomsiktigheten til fyllingen, legg til et attributt opasitet, For eksempel opasitet= "0,5" reduserer gjennomsiktigheten av fyllingen med 2 ganger, og for å endre gjennomsiktigheten til streken, legg til attributtet slag-opasitet, For eksempel slag-opasitet= "0,5" Reduserer gjennomsiktigheten av slaget med 2 ganger.

Rektangler, firkanter.

Innstilling av rektangler ser slik ut

Attributter til et rektangel (kvadrat) rekt angi koordinatene til øvre venstre hjørne, samt bredden og høyden på rektangelet. Innstillingene for fyll og strek ser like ut.

Vel, til slutt, en sirkel med en firkant

For å endre gjennomsiktighet bruker vi en allerede kjent tilnærming – legg til et attributt opasitet for fyll og attributt slag-opasitet for å skissere.

Fortsettelse følger.

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)-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 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.

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: