Sådan kommer du i gang med SVG
I løbet af de sidste par måneder er svømmen omkring SVG-billeder vokset og vokset. SVG har eksisteret i årevis, men det er først for nylig, at det er begyndt at ligne en rigtig konkurrent.
Hype omkring SVG er ikke bare noget hipster-trend, SVG løser fuldstændigt problemer, som filformater som JPG helt undlader at adressere.
Hvis du vil begynde at bruge SVG, er denne artikel til dig. Jeg vil guide dig igennem at få din SVG fra Illustrator til HTML og derefter lære dig at ændre dette billede ved hjælp af CSS.
Før vi kommer i gang, kig på demoen Jeg har sat sammen, det er det, vi skal bygge.
Hvad er SVG?
SVG står for Scaleable Vector Graphics, og det første ord vil give dig en anelse om hvorfor SVG er så populær. SVG er den perfekte modpart til responsivt design.
SVG-billeder er i centrum et XML-baseret vektorbilledformat til 2D-grafik.
SVG-specifikationen er en åben standard, som blev udviklet af W3C i 1999, så du kan se det har eksisteret som en teknologi i et årti og et halvt liv i websider.
Hvorfor skal jeg bruge SVG?
Arbejdsstrøm og effektivitet er for værdifulde til at smide på et indfald. Hvis du skal skifte fra JPG eller PNG til SVG, så har du brug for gyldige grunde, heldigvis giver SVG meget:
- SVG er normalt mindre end bitmaps som JPG og PNG, hvilket betyder at de bruger mindre webrum og downloader hurtigere.
- SVG-billeder er skalerbare, de ser godt ud, uanset hvilken størrelse du bruger dem på, og det er strålende til nethinden.
- SVG gør det lydhørede billede konfrontrum akademisk, ved at give en one-size passer til alle løsninger.
- SVG er perfekt til den fladt design trend, der i øjeblikket er så populær.
- Fordi SVG er i det væsentlige XML, kan den styres med CSS og JavaScript, der giver et væld af interaktive muligheder.
- SVG kræver ikke HTTP-anmodninger
SVG er en del af dokumentets kildekode og er allerede tilgængelig.
SVG er en utroligt nyttig teknologi, og det er et mysterium for mange, hvorfor det ikke har slået ud til fuldere effekt.
Fra Illustrator til Web
Der er et væld af applikationer, der udsender SVG, du kan bruge nogen af dem. Min personlige præference er Adobe Illustrator, så det er det, vi vil bruge.
Jeg har lige smidt sammen nogle former og nogle tekst til vores SVG:
Som du kan se, er det en meget simpel grafik, så vi tydeligt kan se, hvad der sker i koden.
Det næste skridt er at gemme det som en SVG. Så vælg Filer> Gem som.
Du får vist den sædvanlige pop-up, og i denne skal du vælge SVG-formatet. så snart du gør dette vises pop op:
Denne dialog giver os to muligheder:
Mulighed 1: Gem billedet
Den første mulighed er at klikke på OK i pop op og gem simpelthen billedet som et .svg billede og tilføj det til vores HTML, da vi ville få et bitmapbillede:
Dette er helt fint, og billedet skal stadig skaleres, hvis du vil have det, men fordi denne indstilling er en integreret fil, har vi ikke redigeringsevner i kildekoden på vores side.
Mulighed 2: SVG-kode ...
Den anden mulighed er at få direkte adgang til koden for billedet ved at klikke på knappen SVG Kode .... Du kan derefter kopiere det og indsætte det i din HTML.
Koden jeg fik var:
Dette er den foretrukne tilgang, fordi det giver os mulighed for at manipulere billedet med CSS.
Som du kan se, er koden simpel XML, og som følge heraf er det nok velkendt for alle, der arbejder på nettet. Denne kendskab er en stor fordel, når du arbejder med SVG.
Du vil også se, at der er en række attributter i XML-elementerne, der detaljerer farver og positioner; Det er de værdier, vi vil manipulere senere.
Rengøring af koden
Hvis du er bekendt med XML (bekymre dig ikke, hvis du ikke er), vil du se, at koden produceret af Illustrator er noget rodet. Dette skyldes, at det er tilføjet præsentations-CSS-egenskaber i XML'et, der klutter det op.
Så det næste job vi har er at flytte præsentationsaspekterne til CSS, hvor de hører hjemme.
Vi kan se, at alle vores former har en fyldfarve, og det er et af de attributter, vi nemt kan flytte til vores CSS. For at gøre det behøver vi bare at slette fillattributtet og værdien fra XML og bruge en enkel vælger til at definere den farve, vi ønsker i fillegenskaben:
rect {fill: #AD6F6F;}circle {fill: #6F9FAA;}polyline {fill: #6FA86F;}Dernæst kan vi se, at i vores tekst kan de fleste attributter også overføres til vores CSS. Du skal bare slette fill, font-familie og skrifttypestørrelse fra XML og tilføje dem til CSS:
text {fill: #383838 ;font-family: 'Pacifico-Regular', arial, sans-serif;font-size: 35px;} Lad os se vores kode nu:
Du kan se det ved at fjerne præsentationsattributterne, vi har langt mere læselig kode.
Tager det op i et hak
Vi har flyttet vores præsentationsattributter ud af vores XML til vores CSS, men det var attributter, vi allerede havde. Vi kan også tilføje helt nye attributter.
Det første jeg vil gøre er at tilføje et slagtilfælde til vores første cirkel, men ikke kun det, jeg vil kontrollere tykkelsen og opaciteten. Det er meget enkelt:
circle {stroke: #547178;stroke-width: 5px;stroke-opacity: 0.5;}Hvis du tjekker din fil, vil du se, at dette faktisk tilføjer et slag til cirklen, men det tilføjer det også til den anden cirkel, som vi ikke ønskede.
Løsningen er nøjagtig den samme som ethvert CSS valg problem, vi skal bare tilføje en klasse til vores XML element:
Og så kan vi målrette klassen i vores CSS:
circle.stroke {stroke: #547178;stroke-width: 5px;stroke-opacity: 0.5;}Næsten enhver CSS kan anvendes til SVG. Vi kan anvende en svingeffekt, der vil øge vores skriftstørrelse, for eksempel:
text:hover {font-size: 40px;}Hvis du tester det, vil du se, at det virker, men det er lidt af et øjeblikkeligt svar. Det ville være langt bedre, hvis vi brugte en CSS-overgang, hvilket naturligvis er muligt:
text {fill: #383838 ;font-family: 'Pacifico-Regular', arial, sans-serif;font-size: 35px;transition: all 1s ease;}Hvis du genindlæser siden, vil du se en skånsom overgang i skriftstørrelse.
Konklusion
Som du kan se, har SVG meget magt bagved. Læringskurven er meget lav, og mulighederne virker uendelige. Et enkelt SVG-billede er værd at snesevis af bitmapbilleder.
Fremhævet billede / miniaturebillede, skalerbart designbillede via Shutterstock.