Share
Som webbdesigner är det dags att du visste hur man implementerar SVG (Scalable Vector Graphics) i dina webbplatser. Låt oss nu ta en titt på SVGs grunder, liksom mer komplexa mönster som logotyper eller ikoner.
Nyligen vid WWDC 2012 tillkännagav Apple utgivandet av den nya retina displayen MacBook Pro. Näthinnan har en högre pixeldensitet (220.5ppi) än den för vanliga skärmar eller skärmar och Apple hävdar att deras näthinnteknikens pixeldensitet är så hög att ögat inte kan märka pixelering vid ett typiskt avstånd. Om du har sett en näthinnan på första hand så är jag säker på att du håller med om att de ser fantastiska ut. Dock kan dessa näthinnesskärmar börja orsaka problem för oss webbdesigners.
Problemet uppstår när bilder som tidigare sparades som 72ppi börjar se snedvridna på näthinnan. Lösningen på detta problem är fortfarande inte 100% lös och designers tittar på nya sätt att försöka komma runt detta problem.
En möjlig lösning (i vissa fall) är att använda SVG. Varför vill du använda SVG? SVGs är gjorda som vektorer och kan därför skala till vilken skärmupplösning vi tittar på, samtidigt som vi behåller skärpa och kristallkvalitet som vi tänkte när vi först konstruerade dem.
Detta löser inte alla problem; vi kan inte använda SVG för att göra pixelbaserade bilder som .jpg eller png (men för det kan vi alltid använda duketttaggen). När det gäller saker som illustrerade ikoner eller logotyper, visar SVG sig mycket användbart. Idag ska jag visa dig grunderna i att använda SVG, samt visa hur du kan ta dina vektorer som du har utformat i Adobe Illustrator och implementera dem på dina webbplatser med lätthet.
Innan vi hoppar in, ska jag ge dig en snabb översikt över SVG:
Låt oss börja enkelt. Vi skapar en rad. Vi gör det genom att lägga till följande kod i ett HTML-dokument.
För det första använder vi svg-taggen och sedan in i det lägger vi till xml-markeringen. Här är vad vi definierar:
Så om vi till exempel vill skapa en diagonal linje så kan vi ställa in y2-attributet till 200 och detta skulle bringa slutpunkten av linjen ner med 200, vilket skapar en diagonal linje. Vi kan också tillämpa några stilar på detta och vi gör det med CSS. Här har vi använt vissa inline-stilar, men du kan använda dem i ett externt stilark om du vill.
Cirklar kan skapas på samma sätt som en rad, med undantag för några attribut. Här skapar vi en silvercirkel med en svart kant och en radie av 50.
Cx- och Cy-attributen är de där vi kan ställa in x- och y-koordinaterna i mitten av cirkeln. Om vi missade dessa attribut skulle cirkelns centrum vara satt till "0" vilket skulle leda till att cirkeln skärs från sidan. Slutligen anger attributet som är märkt 'r' cirkelns radie.
Som du kan se nu är det enkelt att skapa former med SVG. Att skapa en rektangel är inget undantag.
På samma sätt som att ange bredd och höjd på ett element i CSS gör vi detsamma men använder svg 'rekt' attribut.
Ellipse fungerar på nästan samma sätt som att skapa en cirkel, men den här gången snarare än att bara ha en fast radie, har vi separata attribut för x- och y-radie.
Polygoner blir lite mer knepiga (men bara lite). Vi börjar med att ge polygonen en fyllfärg, en orangefärgsslag och en strokebredd på 10. Vi skickar sedan poängegenskaperna till den. Varje par koordinater definierar x- och y-koordinaten för varje hörnpunkt för polygonen. I den här demonstrationen har jag skapat en stjärna.
Som tidigare nämnts är SVG bra eftersom när vi inkluderar text kan sökmotorerna indexera det - till skillnad från andra renderingsmotorer som Flash.
Så här lägger vi till text:
webdesigntuts+
I ovanstående kod kan du se att vi har lagt till x- och y-koordinaterna. Ange sedan några CSS-stilar, t.ex. typsnittet, vikt, storlek och färg.
Inom sökväggen måste vi koncentrera oss på attributet "d". Denna "d" -attribut beskriver den väg som ska skapas. Varje kommando inom attributet 'd' är ett av kommandoraden nedan, följt av dess parametrar. Kommandon för attributet "d" är följande:
Här är några exempelkod:
Vi kan till och med ställa in vår text ovanifrån för att följa den här sökvägen så här:
Vi har i grunden definierat sökvägen i "defs" -taggen och gav den ett ID för "path1". Vi kan sedan tillämpa detta på texten med attributet "textPath".
Nu när vi har täckt grunderna för att skapa former som använder SVG, är det dags att gå vidare till någonting lite mer komplext. Lyckligtvis för oss men det behöver inte vara den där komplicerat, faktiskt är det faktiskt väldigt enkelt tack vare Adobe Illustrator. För er som inte känner till Illustrator kan det beskrivas som:
Branschens främsta vektorteckningsmiljö för att skapa grafik som går över media.
Öppna Illustrator och skapa din logotyp eller ikon. De flesta professionella logotyper ska ha skapats med hjälp av vektorer så att du borde kunna få dem från dina kunder. Om inte, kan du försöka återskapa dem själv. Om du inte är bekant med att arbeta i Illustrator så finns det en mängd information över hos Vectortuts+
När du har logotypen eller ikonen, gå till "Arkiv> Spara som" och välj sedan "SVG" från rullgardinsmenyn Spara som typ. Ge din fil ett namn och klicka sedan på "Spara". Dialogrutan SVG-alternativ ska öppnas. Därifrån välj "Visa SVG-kod". Då öppnas koden i webbläsaren. Du behöver helt enkelt kopiera mellan och inkludera svg-taggarna i ditt HTML-dokument och det är det. Hur enkelt var det?
Du kan också använda Illustrator för att skapa sökvägar. Rita bara en rad i Illustrator, ta tag i attributen "d" -attribut som du kan använda för en sökväg som vi beskrivit tidigare. Till exempel skapades den sökväg som jag skapade för texten "webdesigntuts +" ovan i Illustrator och exporterades sedan till mitt dokument.
Du kan sedan ställa in eller placera SVG-taggen i ditt dokument med hjälp av vanliga CSS-metoder. Du kan också lägga den i en ankaremärke för att skapa en länk, eller rikta den med JavaScript för att lägga till extra funktionalitet.
Det är nu bara en fråga om tid innan näthinnan och pixeldensiteten är en del av varje enhet och skärm som vi använder och detta kommer att fortsättas framåt med större densitet i framtiden. Genom att använda SVG kan vi skapa skalbar grafik som gör kristallklar och kommer att vara redo för framtiden eftersom skärmupplösningarna blir högre. Naturligtvis är SVG inte praktiska i alla situationer, men för vektorbaserade illustrationer på webben är det absolut det bästa sättet framåt.
Accentsconagua