SVG Files: Fra Illustrator til Web
Dette innlegget er en del av en serie kalt Web og grensesnittdesign Med Vector.Create et sett med glanset Etiketter og lagre dem for WebQuick Tips: Hvordan lage en Simple web Button Set Bruke Utseende Panel
Scalable Vector Graphics (SVG) er en vektor bildeformat som begynte livet tilbake i 1998. det var alltid utviklet med web i tankene, men først nå har det web faktisk begynt å fange opp . Det er ikke benektes sin relevans i dag, så la oss ta en titt på det grunnleggende å ta SVG fra Illustrator til nettleseren
Merk:. Jeg bruker Adobe Illustrator CC å demonstrere ting her, men andre versjoner har lignende (om ikke identisk) alternativer og verktøy.
Hvorfor er SVG Nyttig?
SVG-formatet ble utviklet, og fortsetter å bli opprettholdt, av World Wide Web Consortium (W3C). W3C består av en gruppe smarte folk, som jobber med å standardisere på nettet, noe som gjør det til et åpent og tilgjengelig sted for alle.
SVG er bra for web, spesielt i disse dager, som det omgår problemet med skjermen oppløsning. Det spiller ingen rolle hvor tett pakket den nye smart-telefonen piksler, vektorer vil alltid bli vist som skarpt som nysnø, noe som ikke alltid sant av rasterbilder.
Filstørrelsen er alltid et problem med web (ingen ønsker å vente på en 5TB bilde for å laste inn i nettleseren over en mobil tilkobling) og så SVG er et forenklet vektorformat. Den er bygget med XML, og mye unødvendig "ting" er fjernet, noe som gir en forholdsvis lett fil.
Til slutt, gitt disse XML byggeklosser, innholdet i en SVG-fil kan bli manipulert og stylet bare som alle andre element på en nettside. Deler innen en SVG kan isoleres, kan bli endret fargene, hjerneslag vekten kan endres, gjennomsiktighet, kan vi også bruke bestemte filtre (som uskarphet), selv animere Anmeldelser - alt gjennom CSS og Javascript . fordelene med skarp linjekvalitet og være i stand til å manipulere et grafisk element er selvforklarende, men der kan du dra nytte av dette? Her er en rask liste over situasjoner der SVG kommer til sin rett: Hver dag grafikk: Hvis du bruker et grafisk på en nettside, vurdere hvorvidt det kan være så SVG-format. Hvis ja, hvorfor ikke bruke det? Fotografering ville være et eksempel der SVG ikke fornuftig, men for alt annet, gi det noen trodde. Ikoner: Nettsteder over hele verden er pepret med ikoner; de er universelt forstått (når det brukes riktig) og forkorte tiden det tar før en bruker til å behandle et grensesnitt. Ikoner i disse dager blir ofte brukt til nettsteder gjennom web-fonter, men kan også injiseres i en side som SVG. Helt rene og skarpe ikoner for alle, nydelig Logos. Hvis det er én ting en selskapet bør holde dyrebare, det er dens identitet. SVG tilbyr den beste måten å vise merkevarebygging på nettet, ren og enkel. Farger kan være presis, er linjekvalitet ulastelig og samme fil kan brukes flere ganger over en nettside, men endres avhengig av omstendighetene. . Perfekt Dekor:? Jeg trenger ikke å selge denne ideen til en last av vektor artister, jeg animasjon: Gjennom CSS3 og Java en hel verden av animasjon har åpnet opp til nettet. SVG er den perfekte bilen også, for alle grunnene jeg har listet opp så langt. Kan du forestille knapper som animere når du ruller over dem? Ikoner som gir deg direkte personlig tilbakemelding? Himmelen er virkelig grensen. Så det er det SVG er. En vektor format, utviklet med web i tankene. La oss ta en titt på hvordan vi kan bruke det. Vi kommer til å jobbe med et virkelig grunnleggende bilde, for å vise hva SVG gjør. Åpne opp Illustrator, begynner et nytt dokument (Fil > nytt dokument)., gi den et navn hvis du ønsker, og sette Artboard på 300 x 300 piksler Det spiller liten rolle hva du bruker som demo vektor på dette punktet, men gå for noe relativt enkelt. Jeg har brukt "No Pirates tillatt" glyph, fritt tilgjengelig med "Webdings" font (jeg aldri trodde jeg ville bruke det for noe!) Gå til symbolpanelet (Type > Glyphs) velg "Webdings" font å bla gjennom de ulike tilgjengelige tegn. med tekstverktøyet er valgt, klikk på Artboard, deretter dobbeltklikker du tegnvarianten av valg å gjøre bruk av den. Vi overvåker nå kommer til å konvertere denne type glyph inn skisserer Merk:. SVG støtter faktisk tekstobjekter, men å demonstrere ting på et grunnleggende nivå, vi vil velge stier Velg den tegnvariant, med Selection Tool (V). Så gå til Type > Lag Outlines. Super! Vi har nå en bane-basert vektor objekt For å lagre dokumentet som SVG, gå til Fil >.; Lagre eller Fil > Lagre som .. I dialogen som dukker opp, velg en plassering, gi den et filnavn (hvis du ikke allerede har gjort) og, viktigst, velger SVG som format: Du vil deretter bli presentert med en annen dialog, denne gangen med noen SVG-alternativer. I all sannhet, ignorerer disse alternativene på dette punktet vil tjene deg helt bra. Standardverdiene er alt som du ønsker dem under normale omstendigheter. Vi vil dekke noen av disse alternativene litt senere, men for nå, trykk OK. Vi har en SVG-fil! Vi hoppet over SVG alternativer fordi du egentlig ikke trenger å betale mye oppmerksomhet til dem. Men for skyld for å være grundig, la oss ta en titt. Til å begynne med, vi kunne ha valgt to mulige SVG formater i spare dialog. SVGZ er et tungt komprimert ( glidelås Den evig skiftende landskap av nettet, og kontinuerlig utvikling av web-standarder, mener at SVG vokser stadig. Du kan se dette takket være det første alternativet når du lagrer en SVG-fil: SVG-profiler. Profil valg i dag se slik ut: De mener (mer eller mindre) følgende: Snart vil vi være i stand til å legge til SVG 2.0 til denne listen. I virkeligheten, nyansene av disse profilene er i stor grad irrelevant for oss. SVG er i stand til å håndtere alle slags ting, men for enkle vektorer holde seg til gjeldende standard av SVG 1.1 og grafikken vil være helt fint, der det er mulig, på nettet. SVG-filer kan inneholde mye mer enn bare vektorbaner. Tekstobjekter er et slikt eksempel, og muligheten Font lar deg bestemme hvordan tekstobjekter er behandlet En del av skriften alternativet innebærer Under. Dette er bare relevant hvis du har valgt ikke å konvertere teksten til skisserer. Under bygger karakter detaljer i SVG-filen, slik at filen for å vise skrifter som kanskje ikke er til stede på brukerens system . Embedding hele fonter (selvsagt) resulterer i mye tyngre filer, men du kan velge hvor mange symboler som skal inkluderes. Mens vi er på emnet til å bygge, den siste gjenværende alternativene her kan også ha en innvirkning på filstørrelse. på samme måte som med fonter SVG-filer kan inneholde punktgrafikkbilder. Der du ser bilde plassering velge "embed" for å ha bilder tatt i filen i kodeform, eller velg "link" til å ha bildene bare refererte. Dette fungerer på samme måte som størrelse slutten filens plassere bilder i Illustrator seg selv og i stor grad påvirker. Den siste boksen her kan du bevare Illustrator redigeringsmuligheter hvis nødvendig. Dette betyr at informasjon om alle lag, filtre og effekter, vil symboler osv holdes. Igjen, holde dette ukontrollert hvis SVG er klar for produksjon og filstørrelse er viktig Merk:.. Det anbefales at du holder en arbeider AI fil som skal brukes til redigering til slutt, de tre knappene ved foten av alternativer dialogen gjør du følgende: Hvis du ikke er vant til å jobbe direkte med web, HTML, nettlesere, alt det der, det er et par ting å ta hensyn til dette punktet. Først, la oss vise at nettleseren kan håndtere dette formatet utmerket godt. Høyreklikk den nye, skinnende SVG-fil, og velger å åpne den med din standard nettleser: Eldre nettlesere, for eksempel Internet Explorer 8 og tidligere, ikke støtter SVG-format, og dessverre vil ikke spille sammen. Men så lenge du bruker en moderne nettleser, SVG-filen åpnes, og skjermen uten noe 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 piksler, har Artboard diktert de ytre grenser, og pirat-ikonet er plassert som det skal være i sentrum. Til å begynne med trenger vi en nettside. Dette behøver ikke være noe mer komplisert enn en tom fil, med .html filtype, lagret fra innenfor en vanlig tekst editor. Vi trenger ikke bekymre deg for å ha noen kode i denne filen, men hvis du er interessert i det grunnleggende HTML, ta en titt på den beste måten å lære HTML på enkelte punkt. Her er min fil, åpne i TextEdit for Mac OS X, men du kan bruke hvilken som helst tekst eller kode editor du vil. Denne filen åpnes i en nettleser helt fint som det er, men vi må legge til noen HTML "markup" kode for å legge ned SVG. Det er noen tilnærminger til å gjøre dette For det første kan vi bruke et bilde tag (som du kan bli vant til å bruke for JPG, PNG-filer etc.) peker til den eksakte filen banen i src = "" attributt. Lim dette biten i HTML-filen: Forutsatt at filbanen er riktig, vil HTML-siden åpnes i en nettleser akkurat som dette: Ja, jeg vet den generelle effekten på dette stadiet er nøyaktig den samme som når vi åpnet SVG direkte i nettleseren, men nå har vi mye mer kraft! For eksempel kan vi umiddelbart gjøre SVG større, ved å bruke width = "" attributt: Denne tilnærmingen er kanskje den enkleste, men det har sine problemer. Noen nettlesere, av sikkerhetsmessige grunner, vil begrense hva du er i stand til å gjøre det SVG (med Javascript, for eksempel). La oss se på alternativene Bruk < objekt > tag er lik, men du peker til filen stien slik: Resultatet er nøyaktig den samme: for nettlesere som ikke støtter SVG, du kan også plassere en advarsel i innholdet i < objekt >, som skal vises dersom SVG ikke kan være: Mange webdesignere er enige om at denne tilnærmingen er den mest pålitelige og fleksibel måte å bruke SVG på en nettside i øyeblikket. Vi har snakket om XML opprinnelsen til SVG, og hvis du åpner SVG-fil med en teksteditor du ' ll se omtrent slik ut: Wow, hva en last av tull! Egentlig, når du er over det første sjokket, bør du være i stand til å se noen mening i blant den. Vi kan bruke denne XML-kode inline, ved å lime inn innholdet direkte inn i vår HTML-fil. Når du blir litt mer kjent med SVG XML struktur, vil du være i stand til å trimme biter ut av filen, som alle bidrar filstørrelse ta gjerne fjerne. <! DOCTYPE > linje, < - Generator:?. Adobe Illustrator kommentar, og selv < xml uttalelse, hvis du føler for det Alt du egentlig trenger er en forenklet versjon, som består av bare et par XML tags: Vår SVG: Ved hjelp av CSS (styling syntaks brukes i kombinasjon med HTML) kan vi også tilsier at våre SVG-fil fungerer som et bakgrunnsbilde for et element på vår nettside. Vi presser grensene for denne opplæringen nå, men hvis du er interessert i lære grunnleggende CSS, ta en titt på den beste måten å lære CSS Vi kan bruke en egen CSS-fil, linke til den fra vår HTML-dokument, eller vi kan bruke. < stil > koder direkte i vår HTML. Våre stiler vil se omtrent slik ut: Denne stilen regelen sier at vår SVG-fil skal vises som bakgrunn til vår HTML-element. Som om brytes opp det grunnleggende! I denne opplæringen dekket vi SVG skapelse, og grunnleggende SVG bruk for web. Hvis du alltid har lurt på hva SVG var, men aldri visste nøyaktig hvorfor du bør bruke det, håper jeg denne opplæringen har åpnet øynene . Potensialet for dette formatet er stort og vokser hele tiden takket være fantasien og teknisk trolldom av folk i web og grafisk industri. Vi har flere tutorials på animasjon og samspill med SVG-grafikk på vei, så følg med!
Når kan jeg bruke SVG?
Demonstrasjon skarpe skriftprøver. Hvorfor bry seg med fuzzy raster formater?
Jeg er ikke ferdig dette settet av SVG-ikoner ennå, men du er velkommen til å laste ned og bruke dem ..
gjenkjenne denne logoen
SVG dekorasjon courtesy of Fiksér .det
Iconic demonstrere SVG tilbakemeldinger
Lagre en fil som SVG
< h3> nytt dokument
< h3> Velg et bilde
Convert to Outlines
Lagre
Så Deretter de SVG alternativer
SVG vs. SVGZ
, antar jeg) versjon av SVG. Det gir en mindre filstørrelse, men snur XML innenfor selve filen inn vrøvl, hindrer oss i å manipulere vektorene gjennom CSS og Javascript bør vi vil.
SVG Profiles
SVG 1.0: Den første (2001) inkarnasjonen av SVG
SVG 1.1: Ganske mye det samme som SVG 1.0, bortsett fra at SVG 1.1 kan deles inn i ytterligere sub-typer, de er ..
SVG Tiny 1.1: Dette er den første sub-type SVG 1,1 og er optimalisert med det mobile nettet i tankene. Det er en veldig enkel form for SVG, beregnet på "svært begrenset mobile enheter". Tiny støtter ikke graderinger, gjennomsiktighet, klipping, masker, symboler, mønstre, understreket tekst, strike-gjennom tekst, vertikal tekst, eller SVG filtereffekter
SVG Tiny 1.1+. En svak utvikling av SVG Tony 1.1, legge til støtte for gradienter og åpenhet
SVG Basic 1.1. Dette er den andre undertype av SVG 1.1 og gir funksjoner for de mer i stand til mobile enheter, for eksempel smarttelefoner. Basic støtter ikke ikke-rektangulær utklipping og enkelte SVG-filtereffekter
SVG Tiny 1.2. Dette var i utgangspunktet ment å være den neste full spesifikasjon for SVG, men endte opp med å bli en videreutvikling av Tiny undertype . Ikke spør meg hva i all verden er forskjellen.
Fonts
Adobe CEF. Dette bruker font-antydet for å vise mer raffinert typografi. Det er ikke støttet av alle SVG-seere, men.
SVG. Maksimal støtte, anerkjent av alle SVG-seere, men mangler avgrensningen av Adobe CEF
Konverter til omriss: Fjerner alle redigeringsmuligheter, men bevarer teksten på akkurat samme måte, uansett hvor den er vist. Resulterer i en litt større fil, som banene må beskrives, i stedet for bare å si hvilke tegn som er til stede.
Alternativer
Couple o 'knapper
Flere alternativer:? La oss la disse for nå skal vi
< li> SVG kode ..: Starter XML-kode, som finnes i SVG-fil, direkte i en tekst editor
Globe. Starter SVG-filen direkte i en nettleser. Bare så du kan sjekke.
Bruke SVG på nettet
nett~~POS=TRUNC
Flere detaljer om SVG og nettleser støtte kan bli funnet på caniuse.com.
Inkludering SVG Innenfor en webside
< p> Så langt har vi opprettet en SVG-fil, og vi har åpnet den i en nettleser for å sjekke det fungerer. Nå er det tid du skal bruke vår fil på en nettside.
<. Img > Tag Approach
< img src = "SVG-Test.svg" />
< img src = "SVG-Test.svg" width = "900" />, En vakker, skarp SVG, uendelig skalerbar!
<. Objekt > Tag Approach
< objekt type = "image /svg + xml" data = "SVG-Test.svg" > < /object >
< objekt type = "image /svg + xml" data = "SVG-Test.svg" > denne nettleseren suger < /object >
Inline Approach
< svg > ≪ sti /> < /svg >
< SVG version = "1.1" id = "Layer_1" xmlns = "http://www.w3.org/2000/svg" xmlns: XLink = "http://www.w3.org/1999/xlink" x = "0px" y = "0px" width = "300px" height = "300px" viewBox = "0 0 300 300" enable-bakgrunn = "new 0 0 300 300" xml: space = "bevare" > ≪ path d = "M220.784,150c0,19.533-6.914,36.214-20.742,50.042c-13.828,13.829-30.51,20.743-50.042,20.743 c-19.533,0-36.213-6.914-50.042-20.743C86.13,186.214,79.216,169.533,79.216,150c0-19.533,6.914-36.213,20.743-50.042 C113.787,86.129,130.468,79.215,150,79.215c19.532,0,36.214,6.914,50.042,20.742C213.87,113.786,220.784,130.467,220.784,150z M209.463,150c0-16.421-5.806-30.436-17.416-42.047C180.437,96.343,166.421,90.537,150,90.537c-14.693,0-27.6,4.753-38.72,14.261 l11.149,11.148l-7.865,8.644l-11.322-11.409c-8.47,10.775-12.705,23.048-12.705,36.819c0,16.422,5.804,30.438,17.415,42.048 c11.61,11.609,25.626,17.415,42.047,17.415c13.712,0,25.957-4.265,36.732-12.791l-10.199-10.112l7.778-8.643l10.804,10.717 C204.68,177.514,209.463,164.636,209.463,150z M175.756,177.744c0,7.145-2.521,13.224-7.562,18.236 c-5.043,5.013-11.106,7.52-18.193,7.52c-7.145,0-13.253-2.507-18.323-7.52c-5.071-5.013-7.605-11.092-7.605-18.236v-15.212 c-2.882-0.114-5.315-1.18-7.303-3.197c-1.988-2.017-2.982-4.408-2.982-7.174c0-2.708,0.994-5.069,2.982-7.087 c1.988-2.017,4.421-3.082,7.303-3.198v-38.114c17.861,0,31.315,3.197,40.362,9.593c7.548,5.302,11.322,12.044,11.322,20.225 V177.744z M124.072,158.729v-13.051c-4.207,0.346-6.31,2.507-6.31,6.483C117.762,156.195,119.865,158.384,124.072,158.729z M152.333,111.28l-17.977-4.148h-5.963v6.31L152.333,111.28z M165.384,119.663l-7-5.186l-29.991,3.284v6.31L165.384,119.663z M170.311,128.824l-2.247-4.84l-39.67,4.754v5 .186L170.311,128.824z M171.435,138.418v-4.84l-43.042,4.84H171.435z M171.435,177.744v-35.869h-3.458c0,6.167-0.691,10.473-2.074,12.921c-1.383,2.45-3.774,3.674-7.173,3.674 c-6.108,0-9.162-5.532-9.162-16.595h-21.175v35.869H171.435z M146.802,173.681h-3.198v-24.027h-12.187v-2.938h15.384V173.681z M138.678,151.728l-2.939,3.112l -2.506-3.112H138.678z M159.68,186.559v-3.371h-19.532v3.371H159.68z "/> < /svg > CSS Bakgrunn Approach
html {background-image: url (SVG-Test.svg); }
Konklusjon