Hva er SVG godt for?

0
30

Y ‘ all sannsynligvis ikke bli overrasket hvis jeg fortalte deg at det er ganske fantastisk for ikoner og ikonet systemer. SVG-ikonet systemer kan, og kanskje bør være ganske enkelt. Jeg er en fan av bare inlining disse suckers, spesielt når de er ganske enkle.

Men hva annet?

Logos er et klassisk eksempel! Mange mennesker dyppe tærne på denne måten.

Du trenger ikke å inline SVG-hvis du ikke ønsker. Det kan være en <img> eller bakgrunn-bilde som godt.

Disse er veldig enkle ting selv. På det i sitt hjerte, SVG er rett og slett en vektor-basert bilde-format i stand til omtrent alt. Vei høyere opp kompleksiteten skala, Mas skaper utrolig kult flytskjema ved hjelp av SVG.

Prøv å klikke rundt de flytdiagram og se alle de fantastiske animasjonen. SVG er svært fleksibelt og skalerbart. I det eksempelet ovenfor, en del av det som skjer der er en animasjon av det viewBox spesielt.

Sett av interaktive diagrammer, ganske mye noen kartet eller diagrammet du vil se er enten SVG-eller startet livet på den måten. For eksempel, utrolig populær d3.js biblioteket er SVG-basert. Noe som er opprettet med d3 er SVG. Faktisk, de fleste kartlegging biblioteker er basert på d3. Her er Highcharts:

Diagrammer er så business skjønt. Hva om kunst?! Selvfølgelig, SVG er stor for kunst. Kreative verktøy for kunstnere, som illustratører jobber på sine fancy Wacom-tabletter, som arbeider i Adobe Illustrator, kan eksportere sine arbeidet og vise det som SVG.

Det er også animasjon biblioteker som GSAP som er gode på å hjelpe animere SVG, og aktiver vektor kunstnere til å bringe sine kreasjoner til livet:

Se Penn Lil Vikings av Fabio (@FabioG) på CodePen.

Greensock har noen ganske søte betalt funksjoner du kanskje ønsker å sjekke ut.

SVG er flott for lite demonstrative diagrammer! Her er en liten sak fra Rachel Nabors:

Se Penn-Tasten Trykk på SVG illustrasjon med CSS-animasjon av Rachel Nabors (@rachelnabors) på CodePen.

Eller spill! Her er en av Sarah Dranser:

Se Penn Reagere Spill – Elefant Taco Jakte av Sarah Drasner (@sdras) på CodePen.

Ikke er praktisk nok for deg? Hva med det faktum at en SVG-fil kan kapsle inn alle prosedyrer og stiler som er nødvendig for et interaktivt banner? Her er Chris Gannon forklarer:

Og en demo-reklame jeg har gjort én gang:

Se Penn Wufoo SVG-Annonse av Chris Coyier (@chriscoyier) på CodePen.

Kart er en annen fantastisk bruk-saken. amCharts har en haug med gratis dem for deg, for ikke å nevne Wikipedia elsker SVG-formatet spesielt for noe geografisk.

Vil du ha flere? Jeg har en stor samling av eksempler på utrolige ting som kan gjøres med SVG.

Ønsker du å få i gang læring SVG? Jeg fikk bare bestille for deg:

Nå er det på tide å kjøpe, så vel, for de neste to dagene 25% av inntektene går til å RAICES:

Juridisk Representasjon, Advocacy og Utdanning Prosjektet vil gi universal representasjon for utgitt enslige barn i Texas. I fjor var det over 13 000 barn som ikke var representert i innvandring-domstolen i Texas.

👍

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men sikkerhet og sikkerhetskopiering, Markdown-støtte, søk nettstedet, kommentar form, sosiale nettverk-tilkoblinger, og mer!