Share
Scalable Vector Graphics (SVG) er et vektorbildeformat som begynte livet tilbake i 1998. Det ble alltid utviklet med nettet i tankene, men bare nå har nettet faktisk begynt å fange opp. Det er ikke nektet sin relevans i dag, så la oss ta en titt på det grunnleggende om å ta SVG fra Illustrator til nettleseren.
Merk: Jeg bruker Adobe Illustrator CC til å demonstrere ting her, men andre versjoner har lignende (om ikke identiske) alternativer og verktøy.
SVG-formatet ble utviklet, og fortsetter å opprettholdes, av World Wide Web Consortium (W3C). W3C består av en gruppe av smarte folk, som streber etter å standardisere nettet, noe som gjør det til et åpent og tilgjengelig sted for alle.
SVG er bra for nettet, spesielt i disse dager, da det omgår problemet med skjermoppløsningen. Det spiller ingen rolle hvor tett pakket de nye smarttelefonens piksler er, vektorer vil alltid bli vist så skarpe som nyfalt snø, noe som ikke alltid er sant for rasteriserte bilder.
Filstørrelse er alltid et problem på nettet (ingen ønsker å vente på et 5Tb-bilde for å laste inn i nettleseren over en mobil tilkobling) og så SVG er et forenklet vektorformat. Den er bygget med XML, og mange unødvendige "ting" er fjernet, noe som gir en relativt lettvektsfil.
Til slutt, gitt disse XML-byggeblokkene, kan innholdet i en SVG-fil manipuleres og utformes akkurat som alle andre elementer på en nettside. Deler i en SVG kan isoleres, fargene kan endres, slagvekten kan endres, gjennomsiktigheten, vi kan til og med bruke bestemte filtre (som uskarphet), jevn animere - alt gjennom CSS og JavaScript.
Fordelene med skarp linjekvalitet og å kunne manipulere et grafisk element er selvforklarende, men hvor kan du dra nytte av dette? Her er en rask liste over situasjoner der SVG kommer til sin egen:
Hver dag grafikk: Hvis du bruker en grafikk på et nettsted, bør du vurdere om det kan være som SVG-format. Hvis ja, hvorfor ikke bruke det? Fotografi vil være et eksempel der SVG ikke gir mening, men for alt annet, gi det litt tanke.
ikoner: Nettsteder over hele verden er peppered med ikoner; de forstås universelt (når de brukes riktig) og forkorte tiden det tar for en bruker å behandle et grensesnitt. Ikoner i disse dager brukes ofte på nettsteder via webfonter, men kan også injiseres på en side som SVG. Perfekt rene og skarpe ikoner for alle, herlig.
Logos: Hvis det er en ting som et selskap bør beholde verdifullt, er det dets identitet. SVG tilbyr den beste måten å vise merkevarebygging på nettet, ren og enkel. Farger kan være presise, linjekvalitet er ulastelig og samme fil kan brukes gjentatte ganger på en nettside, men endres avhengig av omstendighetene. Perfekt.
Anerkjenn denne logoen? Dekorasjon: Jeg trenger ikke å selge denne ideen til en masse vektorartister, gjør jeg?
animasjon: Gjennom CSS3 og JavaScript har en hel verden av animasjon åpnet opp til nettet. SVG er også det perfekte kjøretøyet, av alle de grunnene jeg har oppført hittil. Kan du forestille deg knapper som animerer når du ruller over dem? Ikoner som gir deg direkte personlig tilbakemelding? Himmelen er virkelig grensen.
Så det er hva SVG er. Et vektorformat, utviklet med nettet i tankene. La oss se på hvordan vi kan bruke den.
Vi skal jobbe med et virkelig grunnleggende bilde for å demonstrere hva SVG gjør.
Åpne Illustrator, start et nytt dokument (Fil> Nytt dokument), gi det et navn hvis du ønsker det, og sett Artboard på 300 x 300px.
Det gjør liten forskjell hva du bruker som din demo vektor på dette punktet, men gå for noe relativt enkelt. Jeg har brukt "No Pirates Allowed" glyph, fritt tilgjengelig med "Webdings" -typen (jeg trodde aldri jeg ville bruke det for noe!)
Gå til glyphs panelet (Type> Glyfer), velg deretter "Webdings" -fonten for å bla gjennom de forskjellige tilgjengelige tegnene.
Med Tekstverktøy velg, klikk på Artboard, da Dobbeltklikk din glyph å velge å gjøre bruk av det.
Vi skal nå konvertere denne typen glyph til konturer.
Merk: SVG støtter faktisk tekstobjekter, men for å demonstrere ting på et grunnleggende nivå, velger vi baner.
Velg glyph, ved hjelp av Utvalgsverktøy (V):
Så gå til Skriv> Opprett oversikter.
Super! Vi har nå et banebasert vektorobjekt.
For å lagre dette dokumentet som SVG, gå til Fil> Lagre, eller Fil> Lagre som ... I dialogen som dukker opp, velg et sted, gi det et filnavn (hvis du ikke allerede har det) og vesentlig, velg SVG som formatet:
Du vil da bli presentert med en annen dialog, denne gangen med noen SVG-alternativer.
I all sannhet vil ignorering av disse alternativene på dette punktet tjene deg perfekt godt. Standardinnstillingene er alt som du vil ha dem under normale omstendigheter.
Vi vil dekke noen av disse alternativene litt senere, men for nå, slå OK.
Vi har en SVG-fil!
Vi hoppet over SVG-alternativene fordi du ikke virkelig trenger å betale mye oppmerksomhet til dem. Men for å være grundig, la oss ta en titt.
Til å begynne med kunne vi ha valgt to mulige SVG-formater i lagringsdialogen.
SVGZ er en tungt komprimert (zippet, Jeg antar) versjon av SVG. Den gir en mindre filstørrelse, men endrer XML-filen i selve filen, og hindrer oss fra å manipulere vektorene gjennom CSS og JavaScript hvis vi ønsker å.
Det stadig skiftende landskapet på nettet, og den kontinuerlige utviklingen av webstandarder, betyr at SVG alltid vokser. Du kan se dette takket være det første alternativet når du lagrer en SVG-fil: SVG Profiler. Profilvalgene ser for øyeblikket ut som dette:
De betyr (mer eller mindre) følgende:
Snart vil vi kunne legge til SVG 2.0 til denne listen. I virkeligheten er nyansene til disse profilene stort sett irrelevante for oss. SVG er i stand til å håndtere alle slags ting, men for enkle vektorer holder seg til gjeldende standard for SVG 1.1 og grafikken din vil være bra, når det er mulig, på nettet.
SVG-filer kan inneholde mye mer enn bare vektorbaner. Tekstobjekter er et slikt eksempel, og Font alternativet lar deg bestemme hvordan tekstobjekter behandles.
En del av skriftalternativet innebærer Under. Dette er kun relevant hvis du har valgt å ikke konvertere teksten til konturer.
Subsetting innebærer tegndetaljer i SVG-filen, slik at filen kan vise fonter som kanskje ikke er tilstede på brukerens system. Inkludering av hele skrifttyper (åpenbart) resulterer i mye tyngre filer, selv om du kan velge hvor mange glyfer skal inkluderes.
Mens vi er på embedet, kan de siste gjenværende alternativene her også påvirke filstørrelsen.
På samme måte som med fonter kan SVG-filer holde bitmap-bilder. Hvor ser du Bilde plassering velg "embed" for å få bilder inkludert i filen i kodeform, eller velg "link" for å få bildene rett og slett referert. Dette fungerer på omtrent samme måte som å plassere bilder i Illustrator selv, og har stor innvirkning på sluttfilens størrelse.
Den siste avkrysningsruten her lar deg bevare Illustrator-redigeringsfunksjonene hvis nødvendig. Dette betyr at detaljer om alle lag, filtre og effekter, symboler etc. vil bli holdt. Igjen, hold dette ukontrollert hvis din SVG er klar for produksjon, og filstørrelsen er viktig.
Merk: Det anbefales at du beholder en fungerende .AI-fil som skal brukes til redigering.
Til slutt gjør de tre knappene ved foten av alternativdialogen følgende:
Hvis du ikke er vant til å jobbe direkte med Internett, HTML, nettlesere, alt det, er det noen ting å ta hensyn til på dette punktet.
For det første, la oss vise at nettleseren din kan håndtere dette formatet godt. Høyreklikk din nye, skinnende SVG-fil, og velg å åpne den med din standard nettleser:
Eldre nettlesere, for eksempel Internet Explorer 8 og tidligere, støtter ikke SVG-formatet, og vil dessverre ikke spille sammen.
Men så lenge du bruker en moderne nettleser, åpner og viser SVG-filen uten problem.
Den første tingen å merke seg er at SVG-filen har beholdt dimensjonene vi opprinnelig ga det. Vår SVG har åpnet på 300 x 300 px, Artboard har diktert ytre grenser, og piratikonet er plassert som det skal være i sentrum.
Så langt har vi opprettet en SVG-fil, og vi har åpnet den i en nettleser for å sjekke at den fungerer. Nå er det på tide å riktig bruke filen vår på en nettside.
Til å begynne med trenger vi en nettside. Dette trenger ikke være noe mer komplekst enn en tom fil, med .html filtype, lagret fra et vanlig tekstredigeringsprogram. Vi trenger ikke bekymre deg for å ha noen kode i denne filen, men hvis du er interessert i grunnleggende om HTML, ta en titt på den beste måten å lære HTML på et tidspunkt.
Her er min fil, åpen i TextEdit for Mac OS X, men du kan bruke hvilken som helst tekst, eller kode redaktør du vil.
Denne filen åpnes i en nettleser like bra som den er, men vi må legge til noen HTML "markup" -kode for å kunne legge inn SVG. Det er noen tilnærminger til å gjøre dette.
Accentsconagua
![]()
For det første kan vi bruke en bildetikett (som du kanskje pleier å bruke for JPG, PNG-filer etc.) som peker på den nøyaktige filbanen i src = "" Egenskap. Lim inn dette utsnittet i HTML-filen din:
Hvis du antar at filbanen er riktig, åpnes HTML-siden din i en nettleser akkurat slik:
Ja, jeg vet at den generelle effekten på dette stadiet er akkurat det samme som da vi åpnet SVG direkte i nettleseren, men nå har vi mye mer strøm! For eksempel kan vi umiddelbart gjøre SVG større ved å bruke width = "" Egenskap:
Denne tilnærmingen er kanskje den enkleste, men det har sine problemer. Enkelte nettlesere, av sikkerhetshensyn, vil begrense hva du kan gjøre SVG (med JavaScript, for eksempel). La oss se på alternativer.
Bruker taggen er lik, men du peker på filbanen slik:
Resultatet er nettopp det samme:
For nettlesere som ikke støtter SVG, kan du til og med legge inn en advarsel i innholdet i , å bli vist hvis SVG ikke kan være:
Mange webdesignere er enige om at denne tilnærmingen er den mest pålitelige og fleksible måten å bruke SVG på en nettside for øyeblikket.
Vi har snakket om XML-opprinnelsen til SVG, og hvis du åpner SVG-filen med teksteditoren, ser du noe slikt:
Wow, hva en masse tull! Faktisk, når du er over det opprinnelige sjokk, bør du kunne se noe fornuftig i blant det. Vi kan bruke denne XML-koden på linje, ved å lim inn innholdet direkte i vår HTML-fil.
Når du blir litt mer kjent med SVG XML-strukturen, kan du klippe biter ut av filen, som alle hjelper filstørrelsen.
Ta gjerne bort linje, den