SVG-filer Från Illustrator till webben

Skalbar vektorgrafik (SVG) är ett vektorbildsformat som började liv tillbaka 1998. Det var alltid utvecklat med webben i åtanke, men bara nu har webben faktiskt börjat hämta. Det finns ingen nekande relevans idag, så låt oss ta en titt på grunderna att ta SVG från Illustrator till webbläsaren.

Notera: Jag använder Adobe Illustrator CC för att visa saker här, men andra versioner har liknande (om inte identiska) alternativ och verktyg.

Varför är SVG Användbar?

SVG-formatet utvecklades och fortsätter att bibehållas av World Wide Web Consortium (W3C). W3C består av en grupp av kloka folk som strävar efter att standardisera webben, vilket gör det till en öppen och tillgänglig plats för alla.

SVG är bra för webben, speciellt idag, eftersom det kringgår problemet med skärmupplösning. Det spelar ingen roll hur tätt packade dina nya smarta telefoners pixlar är, vektorer kommer alltid att visas så skarpa som ny fallen snö, vilket inte alltid är sant för rasteriserade bilder.

Filstorlek är alltid ett problem med webben (ingen vill vänta på en 5Tb-bild för att ladda in i webbläsaren över en mobilanslutning) och så är SVG ett förenklat vektorformat. Det är byggt med XML, och många onödiga "grejer" tas bort, vilket ger en relativt lätt fil.

Slutligen, med tanke på dessa XML-byggstenar, kan innehållet i en SVG-fil manipuleras och utformas precis som alla andra element på en webbsida. Delar i en SVG kan isoleras, färgerna kan ändras, strokevikt kan ändras, genomskinligheten, vi kan till och med tillämpa vissa filter (t.ex. suddning), jämn animera - allt genom CSS och JavaScript.

När skulle jag använda SVG?

Fördelarna med skarp linjekvalitet och att kunna manipulera ett grafiskt element är självförklarande, men var kan du dra nytta av detta? Här är en snabb lista över situationer där SVG kommer in i sitt eget:

Varje dag grafik: Om du använder en grafik på en webbplats, överväga huruvida det kan vara som SVG-format. Om så är fallet, varför inte använda det? Fotografi skulle vara ett exempel där SVG inte är meningsfullt, men för allt annat, ge det lite tanke.

Demonstration av skarpa fontprover. Varför stör med fuzzy raster-format?

ikoner: Hemsidor världen över är peppared med ikoner; De förstås universellt (när de används ordentligt) och förkortar den tid det tar för en användare att bearbeta ett gränssnitt. Ikoner i dessa dagar tillämpas ofta på webbplatser via webbfonter, men kan även injiceras på en sida som SVG. Perfekt rena och skarpa ikoner för alla, underbara.

Jag har inte avslutat den här uppsättningen SVG-ikoner än, men du är välkommen att ladda ner och använda dem ...

Logos: Om det är en sak som ett företag borde hålla dyrbart, är det dess identitet. SVG erbjuder det bästa sättet att visa branding på webben, enkelt och enkelt. Färger kan vara exakta, linjekvalitet är obefläckad och samma fil kan användas upprepade gånger på en webbplats, men ändras beroende på omständigheterna. Perfekt.

Erkänn denna logotyp?

Dekoration: Jag behöver inte sälja den här idén till en massa vektorartister, gör jag?

SVG dekoration med tillstånd av fixate.it

Animering: Genom CSS3 och JavaScript har en hel värld av animering öppnat upp till webben. SVG är också det perfekta fordonet, av alla de skäl jag har listat hittills. Kan du föreställa dig knappar som animerar när du rullar över dem? Ikoner som ger dig direkt personlig feedback? Himlen är verkligen gränsen.

Ikonisk visar SVG-feedback

Så det är vad SVG är. Ett vektorformat, utvecklat med webben i åtanke. Låt oss ta en titt på hur vi kan använda den.

Spara en fil som SVG

Vi ska arbeta med en riktigt grundläggande bild för att visa vad SVG gör.

Nytt dokument

Öppna Illustrator, starta ett nytt dokument (Arkiv> Nytt dokument), ge det ett namn om du vill, och sätt Artboard på 300 x 300px.

Välj en bild

Det gör liten skillnad vad du använder som din demo vektor vid denna tidpunkt, men gå för något relativt enkelt. Jag har använt "No Pirates Allowed" glyph, tillgängligt fritt med "Webdings" -fonturen (jag trodde aldrig att jag skulle använda det för någonting!)

Gå till glyfer panel (Typ> Glyfer) Välj sedan "Webdings" -fonten för att bläddra bland de olika tillgängliga tecknen.

Med Textverktyg välj, klicka på Artboard, då dubbelklicka din glyph val att använda den.

Konvertera till konturer

Vi ska nu konvertera denna typ av glyph till konturer.

Notera: SVG stöder faktiskt textobjekt, men för att visa saker på en grundläggande nivå väljer vi vägar.

Välj glyph med hjälp av Urvalsverktyg (V):

Gå sedan till Skriv> Skapa konturer.

Super! Vi har nu ett banbaserat vektorobjekt.

Sparande

För att spara detta dokument som SVG, gå till Arkiv> Spara, eller Fil> Spara som ... I dialogrutan som dyker upp, välj en plats, ge den ett filnamn (om du inte redan har det) och väsentligt välj SVG som format:

Du kommer då att presenteras med en annan dialog, den här gången med några SVG-alternativ.

I all sanning kommer att ignorera dessa alternativ vid denna tidpunkt tjäna dig perfekt bra. Standardinställningarna är alla som du vill ha dem under normala omständigheter.

Vi kommer att täcka några av dessa alternativ lite senare, men för nu, träffa ok.

Vi har en SVG-fil!

Så då, de SVG-alternativen

Vi hoppade över SVG-alternativen eftersom du inte behöver ägna mycket uppmärksamhet åt dem. Men för att vara grundlig, låt oss ta en titt.

SVG vs SVGZ

Till att börja med kunde vi ha valt två potentiella SVG-format i dialogrutan spara.

SVGZ är en kraftigt komprimerad (Blixtlås, Jag antar) version av SVG. Det ger en mindre filstorlek, men ändrar XML-filen i själva filen till gibberish, vilket hindrar oss att manipulera vektorerna genom CSS och JavaScript om vi vill.

SVG Profiler

Det ständigt växande landskapet på webben och den ständiga utvecklingen av webbstandarder betyder att SVG alltid växer. Du kan se detta tack vare det första alternativet när du sparar en SVG-fil: SVG Profiler. Profilvalen ser för närvarande ut så här:

De betyder (mer eller mindre) följande:

SVG 1.0: Den första (2001) inkarnationen av SVG
SVG 1.1: Ganska mycket detsamma som SVG 1.0, förutom att SVG 1.1 kan delas upp i ytterligare undertyper, de är ...
SVG Tiny 1.1: Detta är den första undertypen SVG 1.1 och är optimerad med mobilwebben i åtanke. Det är en mycket enkel form av SVG, designad för "högt begränsade mobila enheter". Tiny stöder inte gradienter, genomskinlighet, klippning, masker, symboler, mönster, understruken text, strejk-text, vertikal text eller SVG-filtereffekter.
SVG Tiny 1.1+: En liten utveckling av SVG Tony 1.1, som lägger till stöd för gradienter och öppenhet.
SVG Basic 1.1: Det här är den andra undertypen SVG 1.1 och tillåter funktioner för de mer kapabla mobila enheterna, som smarta telefoner. Basic stöder inte icke-rektangulär klipping och vissa SVG-filtereffekter.
SVG Tiny 1.2: Detta var ursprungligen avsett att vara nästa fullständiga specifikation för SVG, men slutade att vara en utveckling av den lilla undertypen. Fråga mig inte vad på jorden skillnaden är.

Snart kan vi lägga till SVG 2.0 till den här listan. I själva verket är nyanserna av dessa profiler i stort sett irrelevanta för oss. SVG kan hantera alla typer av saker, men för enkla vektorer håller sig till den nuvarande standarden för SVG 1.1 och din grafik kommer att vara bra, när det är möjligt, på webben.

typsnitt

SVG-filer kan innehålla mycket mer än bara vektorvägar. Textobjekt är ett sådant exempel och Font alternativet låter dig bestämma hur textobjekt behandlas.

Adobe CEF: Detta använder typsnitt för att visa mer raffinerad typografi. Det stöds dock inte av alla SVG-tittare.
SVG: Maximal support, erkänd av alla SVG-tittare, men saknar förfining av Adobe CEF.
Konvertera till konturer: Tar bort alla redigeringsfunktioner, men bevarar texten på exakt samma sätt, vart den är visad. Resultatet i en något större fil, som stegen måste beskrivas, snarare än att bara ange vilka tecken som finns.

En del av teckensnittet innebär att delmängder. Detta är endast relevant om du har valt att inte konvertera din text till konturer.

Subsetting inleder karaktärsinformation i SVG-filen, så att filen kan visa teckensnitt som kanske inte finns i användarens system. Inbäddning av hela teckensnitt (självklart) resulterar i mycket tyngre filer, men du kan välja hur många glyfer som ska inkluderas.

alternativ

Medan vi är föremål för inbäddning kan de sista återstående alternativen här också påverka filstorleken.

På samma sätt som med teckensnitt kan SVG-filer hålla bitmappsbilder. Var du ser Bildplats välj "inbädda" för att få bilder som ingår i filen i kodformat, eller välj "länk" för att få bilderna helt enkelt refererade. Det fungerar på ungefär samma sätt som att placera bilder inom Illustrator själv och har stor inverkan på slutfilens storlek.

Den sista kryssrutan här låter dig behålla Illustrator-redigeringsfunktioner om det behövs. Det betyder att detaljer om alla lager, filter och effekter, symboler etc. kommer att hållas. Återigen, håll det här obekant om din SVG är redo för produktion och filstorlek är viktigt.

Notera: Det rekommenderas att du behåller en fungerande .AI-fil som ska användas för redigering.

Par o 'knappar

Slutligen gör de tre knapparna vid foten av alternativdialogen följande:

Fler alternativ: Låt oss lämna dessa för nu, ska vi?
SVG-kod ... : Startar XML-koden, som finns i SVG-filen, direkt i en textredigerare.
Klot: Startar SVG-filen direkt i en webbläsare. Bara så att du kan kolla.

Använda SVG på webben

Om du inte brukar arbeta direkt med webben, HTML, webbläsare, allt det där, finns det några saker att ta hänsyn till vid denna tidpunkt.

Webbläsare

För det första, låt oss visa att din webbläsare kan hantera detta format helt bra. Högerklicka din nya, glänsande SVG-fil, och välj att öppna den med din vanliga webbläsare:

Äldre webbläsare, till exempel Internet Explorer 8 och tidigare, stöder inte SVG-formatet och kommer tyvärr inte att spela tillsammans.

Mer information om SVG och webbläsarsupport finns på caniuse.com.

Men så länge du använder en modern webbläsare, öppnar och visar SVG-filen utan problem.

Det första att notera är att SVG-filen har behållit de mått som vi ursprungligen gav den. Vår SVG har öppnat på 300 x 300px, Artboard har dikterat de yttre gränserna och piratikonen placeras som den borde vara i centrum.

Inbäddning SVG Inom en webbsida

Hittills har vi skapat en SVG-fil och vi har öppnat den i en webbläsare för att kontrollera att den fungerar. Nu är det dags att korrekt använda vår fil på en webbsida.

Till att börja med behöver vi en webbsida. Detta behöver inte vara något mer komplext än en tom fil, med .html filtillägg sparas från en vanlig textredigerare. Vi behöver inte oroa oss för att ha någon kod inom den här filen, men om du är intresserad av HTML-basen, ta en titt på det bästa sättet att lära dig HTML vid någon tidpunkt.

Här är min fil, öppen i TextEdit för Mac OS X, men du kan använda vilken text eller kodredigerare du vill ha.

Den här filen öppnas i en webbläsare precis som den är, men vi måste lägga till någon HTML-kodning för att kunna integrera SVG. Det finns några sätt att göra detta.

De Tagga tillvägagångssätt

För det första kan vi använda en bildtagg (som du kanske brukar använda för JPG, PNG-filer etc.) som pekar på exakt filvägen inom src = "" attribut. Klistra in det här koden i din HTML-fil:

Om du antar att filvägen är korrekt öppnas din HTML-sida i en webbläsare på samma sätt:

Ja, jag vet att den allmänna effekten i detta skede är exakt densamma som när vi öppnade SVG direkt i webbläsaren, men nu har vi mycket mer kraft! Till exempel kan vi omedelbart göra SVG större, genom att använda width = "" attribut:

En vacker, skarp SVG, oändligt skalbar!

Detta tillvägagångssätt är kanske det enklaste, men det har sina problem. Vissa webbläsare kommer av säkerhetsskäl att begränsa vad du kan göra SVG (med JavaScript, till exempel). Låt oss titta på alternativ.