Vad är SVG bra för?

0
23

Y ‘ all förmodligen skulle inte bli förvånad om jag sa till dig att det är ganska häftigt för ikoner, och ikonen system. SVG-ikonen system kan, och kanske bör vara ganska lätt. Jag är ett fan av bara inlining dessa rotskott, särskilt när de är ganska enkla.

Men vad annars?

Logotyper är ett klassiskt exempel! En hel del människor doppa tårna på detta sätt.

Du behöver inte inline SVG-om du inte vill. Det kan vara en <img> eller background-image.

Dessa är enkla saker ändå. Vid det hjärta, SVG är helt enkelt en vektorbaserad bild format kapabla av precis vad som helst. Sätt högre upp komplexiteten skala, Rörelse skapar otroligt cool flödesscheman med SVG.

Prova att klicka runt dessa flödesscheman och se alla underbara animation. SVG är mycket flexibelt, skalbart. I exemplet ovan, en del av vad som händer där är en animering av viewBox specifikt.

På tal om interaktiva diagram, ganska mycket varje diagram eller graf du ser är antingen SVG eller börjat sitt liv på det sättet. Till exempel, den otroligt populära d3.js biblioteket är SVG-baserade. Något som skapas med d3 är SVG. I själva verket, de flesta kartläggning bibliotek är baserade på d3. Här är Highcharts:

Diagram så att verksamheten ändå. Vad sägs om konst?! Naturligtvis, SVG är bra för konst. Kreativa verktyg för konstnärer, illustratörer som arbetar på deras tycke Wacom tabletter, som arbetar i Adobe Illustrator, kan exportera sitt arbete och visa den som SVG.

Det finns också animation bibliotek som GSAP som är bra på att hjälpa animera SVG, och göra det möjligt vektor konstnärer att få sina skapelser till liv:

Se Pennan Lil Vikingar av Fabio (@FabioG) på CodePen.

Greensock har några ganska söt betalda funktioner kanske du vill kolla in.

SVG är perfekt för små demonstrativa diagram! Här är en liten sak från Rachel Nabors:

Se Penna-Knapp Tryck SVG-bild med CSS animation av Rachel Nabors (@rachelnabors) på CodePen.

Eller spel! Här är en av Sarah Dranser:

Se Pennan Reagera Spel – Elefant Taco Jaga med Sarah Drasner (@sdras) på CodePen.

Inte är praktiskt nog för dig? Vad sägs om det faktum att en enda SVG-fil kan kapsla in alla skript och stilar som är nödvändiga för en interaktiv banner annons? Här är Chris Gannon förklarar:

Och en demo annons jag gjorde en gång:

Se Pennan Wufoo SVG-Ad av Chris Coyier (@chriscoyier) på CodePen.

Maps är en annan fantastisk använda till fall. amCharts har ett gäng gratis och kära för dig, för att inte nämna Wikipedia älskar SVG-format, särskilt för något geografiskt.

Vill du ha mer? Jag har en enorm samling av exempel på fantastiska saker som kan göras med SVG.

Vill du komma igång att lära SVG? Jag fick just den boken för dig:

Nu är det dags att köpa, liksom, eftersom det för nästa två dagar 25% av vinsten går till RAICES:

Den Juridiska Ombud, Opinionsbildning och Utbildning Projektet kommer att ge allmän representation släppt för ensamkommande barn i Texas. Förra året var det drygt 13 000 barn som inte var representerade på invandring domstolen i Texas.

👍

Jetpack WordPress plugin som körs på denna webbplats, driver inte bara relaterade inlägg nedan, men säkerhet och backup, Wiki-stöd, sök på sajten, kommentera form, sociala nätverk, och mycket mer!