Hvordan komme i gang med SVG
I løpet av de siste månedene har buzzen rundt SVG-bildene vokst og vokst. SVG har eksistert i årevis, men det er bare nylig at det begynte å se ut som en ekte konkurrent.
Hype rundt SVG er ikke bare noen hipster trend, SVG løser helt opp problemer som filformater som JPG helt mislykkes å adressere.
Hvis du vil begynne å bruke SVG, er denne artikkelen for deg. Jeg veileder deg gjennom å få din SVG fra Illustrator til HTML og deretter lære deg å endre det bildet ved hjelp av CSS.
Før vi begynner ta en titt på demoen Jeg har satt sammen, dette er hva vi skal bygge.
Hva er SVG?
SVG står for Scaleable Vector Graphics, og det første ordet vil gi deg en anelse om hvorfor SVG er så populært. SVG er den perfekte motparten til lydhør design.
SVG-bilder er i sin kjerne et XML-basert vektorgrafikkformat for 2D-grafikk.
SVG-spesifikasjonen er en åpen standard som ble utviklet av W3C i 1999, slik at du kan se at den har eksistert som teknologi i et tiår og et halvt år i webspråk.
Hvorfor skal jeg bruke SVG?
Arbeidsflyt og effektivitet er for verdifulle å kaste bort på et innfall. Hvis du skal bytte fra JPG eller PNG til SVG, trenger du gyldige grunner, heldigvis gir SVG mye:
- SVG er vanligvis mindre enn bitmaps som JPG og PNG, noe som betyr at de bruker mindre webplass og laster ned raskere.
- SVG-bilder er skalerbare, de ser bra ut uansett hvilken størrelse du bruker dem på, og det er strålende for netthinnen.
- SVG gjør det følsomme bildeforløpet akademisk, ved å gi en en-størrelse som passer til alle løsninger.
- SVG er perfekt for den flate designtrenden som for tiden er så populær.
- Fordi SVG er i hovedsak XML, kan den styres med CSS og JavaScript, og gir et vell av interaktive muligheter.
- SVG krever ikke HTTP-forespørsler;
SVG er en del av dokumentets kildekode og er allerede tilgjengelig.
SVG er en utrolig nyttig teknologi, og det er et mysterium for mange, hvorfor det ikke har gått ut til fullere effekt.
Fra Illustrator til Internett
Det finnes en rekke applikasjoner som vil sende ut SVG, du kan bruke noen av dem. Min personlige preferanse er Adobe Illustrator, så det er det vi skal bruke.
Jeg har nettopp kastet sammen noen former og litt tekst for SVG:
Som du ser, er det en veldig enkel grafikk, slik at vi tydelig kan se hva som skjer i koden.
Det neste trinnet er å lagre det som en SVG. Så velg Fil> Lagre som.
Du ser den vanlige popup-filen, og i denne må du velge SVG-formatet. så snart du gjør dette vil dukke opp vises:
Denne dialogen gir oss to muligheter:
Alternativ 1: Lagre bildet
Det første alternativet vi har er å klikke på OK i popup-vinduet og bare lagre bildet som et .svg-bilde og legge det til i HTML-en vår som et bitmapbilde:
Dette er helt greit, og bildet vil fortsatt skaleres hvis du vil ha det, men fordi dette alternativet er en innebygd fil, har vi ikke redigeringsevner i kildekoden på siden vår.
Alternativ 2: SVG-kode ...
Det andre alternativet er å få tilgang til koden for bildet ved å klikke på SVG-koden ... -knappen. Du kan deretter kopiere det og lime det inn i HTML-en.
Koden jeg fikk var:
Dette er den foretrukne tilnærmingen fordi den skal tillate oss å manipulere bildet med CSS.
Som du kan se, er koden enkel XML, og som et resultat er det sannsynligvis rimelig kjent for alle som jobber på nettet. At kjennskap er en stor fordel når du jobber med SVG.
Du vil også se at det finnes en rekke attributter i XML-elementene, som detaljer farger og posisjoner; Dette er verdiene vi skal manipulere senere.
Rengjøring av koden
Hvis du er kjent med XML (ikke bekymre deg hvis du ikke er), ser du at koden produsert av Illustrator er noe rotete. Dette skyldes at det er lagt til presentasjonelle CSS-egenskaper i XML-filen, og ruter det opp.
Så den neste jobben vi har er å flytte presentasjonsaspektene til CSS der de tilhører.
Vi kan se at alle våre former har en fyllfarge, og det er en av egenskapene vi lett kan flytte til vårt CSS. For å gjøre det behøver vi bare å slette fylleattributtet og verdien fra XML og bruke en enkel velger for å definere fargen vi vil ha i fyllingsegenskapen:
rect {fill: #AD6F6F;}circle {fill: #6F9FAA;}polyline {fill: #6FA86F;}Deretter kan vi se at i vår tekst kan de fleste attributter også overføres til vårt CSS. Bare slett fyll, skriftfamilie og skriftstørrelse fra XML og legg til dem i CSS:
text {fill: #383838 ;font-family: 'Pacifico-Regular', arial, sans-serif;font-size: 35px;} La oss se koden vår nå:
Du kan se at ved å fjerne presentasjonsattributtene, har vi langt mer lesbar kode.
Tar det opp et hakk
Vi har flyttet våre presentasjonsattributter fra XML til vårt CSS, men det var attributter vi allerede hadde. Vi kan også legge til helt nye attributter.
Det første jeg vil gjøre er å legge til et slag i vår første sirkel, men ikke bare det, jeg vil kontrollere tykkelsen og opaciteten. Det er veldig enkelt:
circle {stroke: #547178;stroke-width: 5px;stroke-opacity: 0.5;}Hvis du sjekker filen, ser du at dette faktisk legger til et slag i sirkelen, men det legger det også til den andre sirkelen som vi ikke ville ha.
Løsningen er akkurat det samme som et CSS-utvalgsproblem, vi trenger bare å legge til en klasse i vårt XML-element:
Og så kan vi målrette klassen i vårt CSS:
circle.stroke {stroke: #547178;stroke-width: 5px;stroke-opacity: 0.5;}Nesten noen CSS kan brukes til SVG. Vi kan bruke en svingeffekt som vil øke skriftstørrelsen, for eksempel:
text:hover {font-size: 40px;}Hvis du tester det, vil du se at det fungerer, men det er litt av en øyeblikkelig respons. Det ville være langt bedre hvis vi brukte en CSS-overgang, som selvsagt er mulig:
text {fill: #383838 ;font-family: 'Pacifico-Regular', arial, sans-serif;font-size: 35px;transition: all 1s ease;}Hvis du oppdaterer siden, ser du en forsiktig overgang i skriftstørrelsen.
Konklusjon
Som du kan se, har SVG mye makt bak den. Læringskurven er veldig grunne, og mulighetene virker uendelige. Et enkelt SVG-bilde er verdt dusinvis av bitmap-bilder.
Utvalgt bilde / miniatyrbilde, skalerbart designbilde via Shutterstock.