Så här börjar du med SVG
Under de senaste månaderna har buzzen kring SVG-bilder vuxit och vuxit. SVG har funnits i åratal, men det är bara nyligen att det börjar se ut som en riktig utmanare.
Hype runt SVG är inte bara en hipster trend, SVG löser helt problem som filformat som JPG helt misslyckas med att ta itu med.
Om du vill börja använda SVG, är den här artikeln för dig. Jag guidar dig genom att få din SVG från Illustrator till HTML och sedan lära dig att ändra den bilden med hjälp av CSS.
Innan vi börjar, ta en titt på demo Jag har satt ihop, det här ska vi bygga.
Vad är SVG?
SVG står för Scaleable Vector Graphics, och det första ordet kommer att ge dig en aning om varför SVG är så populär. SVG är den perfekta motdelen till responsiv design.
SVG-bilder är i själva verket ett XML-baserat vektorbildsformat för 2D-grafik.
SVG-specifikationen är en öppen standard som utvecklades av W3C 1999, så att du kan se att den har funnits som en teknik i ett decennium och en halvt liv i webben.
Varför ska jag använda SVG?
Arbetsflöde och effektivitet är för värdefulla att kasta bort på ett infall. Om du ska byta från JPG eller PNG till SVG behöver du giltiga skäl, tyvärr ger SVG mycket:
- SVG är vanligtvis mindre än bitmappar som JPG och PNG, vilket innebär att de använder mindre webbutrymme och laddar ner snabbare.
- SVG-bilderna är skalbara, de ser bra ut oavsett vilken storlek du använder dem på, och det är briljant för näthinnan.
- SVG gör den svåra bildkunden akademisk, genom att tillhandahålla en enstorlek som passar alla lösningar.
- SVG är perfekt för den trendiga plattformen som för närvarande är så populär.
- Eftersom SVG är väsentligen XML kan den styras med CSS och JavaScript, vilket ger en mängd interaktiva möjligheter.
- SVG kräver inte HTTP-förfrågningar.
SVG är en del av dokumentets källkod och är redan tillgänglig.
SVG är en otroligt användbar teknik, och det är ett mysterium för många varför det inte har tagit slut för att få fullare effekt.
Från Illustrator till webben
Det finns en mängd applikationer som kommer att skriva ut SVG, du kan använda någon av dem. Min personliga preferens är Adobe Illustrator, så det är vad vi ska använda.
Jag har just kastat ihop några former och lite text för vårt SVG:
Som du kan se är det en mycket enkel grafik, så att vi tydligt kan se vad som händer i koden.
Nästa steg är att spara det som en SVG. Så välj Arkiv> Spara som.
Du får se den vanliga popupen, och i den här måste du välja SVG-formatet. så snart du gör så kommer popupen att visas:
Denna dialog ger oss två alternativ:
Alternativ 1: Spara bilden
Det första alternativet vi har är att klicka på OK i popup-fönstret och helt enkelt spara bilden som en .svg-bild och lägga till den i vår HTML som vi skulle ha en bitmap-bild:
Det här är helt bra, och bilden kommer fortfarande att skala om du vill att den ska, men eftersom det här alternativet är en inbäddad fil, kommer vi inte att ha redigeringsförmåga i källkoden på vår sida.
Alternativ 2: SVG-kod ...
Det andra alternativet är att direkt komma åt koden för bilden genom att klicka på SVG-koden .... Du kan sedan kopiera den och klistra in den i din HTML.
Koden jag fick var:
Detta är det föredragna tillvägagångssättet eftersom det kommer att tillåta oss att manipulera bilden med CSS.
Som du kan se är koden enkel XML och är följaktligen noga med alla som arbetar på webben. Att bekanta är en stor fördel när man arbetar med SVG.
Du ser också att det finns ett antal attribut i XML-elementen, detaljarfärgerna och positionerna. Det här är de värden som vi kommer att manipulera senare.
Rengöring av koden
Om du är bekant med XML (oroa dig inte om du inte är) så ser du att koden som produceras av Illustrator är lite rörig. Det här beror på att det har lagts till CSS-egenskaper i XML-formatet, som kladdrar upp det.
Så nästa jobb vi har är att flytta presentationsaspekterna till CSS där de hör hemma.
Vi kan se att alla våra former har en fyllnadsfärg, och det är en av de attribut som vi enkelt kan flytta till vår CSS. För att göra det behöver vi bara ta bort fyllningsattributet och värdet från XML och använd en enkel väljare för att definiera den färg vi vill ha i fyllningsegenskapen:
rect {fill: #AD6F6F;}circle {fill: #6F9FAA;}polyline {fill: #6FA86F;}Därefter kan vi se att i vår text kan de flesta attributen också överföras till vår CSS. Ta bara bort fill, font-family och fontstorlek från XML och lägg till dem i CSS:
text {fill: #383838 ;font-family: 'Pacifico-Regular', arial, sans-serif;font-size: 35px;} Låt oss ta en titt på vår kod nu:
Du kan se att genom att ta bort presentationsattributen har vi mycket mer läsbar kod.
Tar det upp ett skår
Vi har flyttat våra presentationsattribut från vår XML till vår CSS, men det var attribut som vi redan hade. Vi kan också lägga till helt nya attribut.
Det första jag vill göra är att lägga till en stroke i vår första cirkel, men inte bara det, jag vill kontrollera tjockleken och opaciteten. Det är helt enkelt:
circle {stroke: #547178;stroke-width: 5px;stroke-opacity: 0.5;}Om du kontrollerar din fil ser du att det verkligen lägger till en stroke i cirkeln, men den lägger också till den i den andra cirkeln som vi inte ville ha.
Lösningen är exakt densamma som alla CSS-valproblem. Vi behöver bara lägga till en klass i vårt XML-element:
Och då kan vi rikta oss mot klassen i vår CSS:
circle.stroke {stroke: #547178;stroke-width: 5px;stroke-opacity: 0.5;}Nästan alla CSS kan tillämpas på SVG. Vi kan tillämpa en svängareffekt som ökar vår typsnittstorlek, till exempel:
text:hover {font-size: 40px;}Om du testar det så ser du att det fungerar, men det är lite av ett ögonblickligt svar. Det skulle vara mycket bättre om vi använde en CSS-övergång, vilket givetvis är möjligt:
text {fill: #383838 ;font-family: 'Pacifico-Regular', arial, sans-serif;font-size: 35px;transition: all 1s ease;}Om du laddar om sidan ser du en mild övergång i teckensnittstorlek.
Slutsats
Som du kan se har SVG mycket kraft bakom den. Inlärningskurvan är mycket grund och möjligheterna verkar oändliga. En enda SVG-bild är värt dussintals bitmappsbilder.
Utvalda bild / miniatyrbild, skalbar designbild via Shutterstock.