Wat is SVG goed voor?

0
27

Y ‘ all waarschijnlijk niet verbazen als ik u vertelde dat het geweldig voor pictogrammen, en het pictogram systemen. SVG-pictogram systemen kunnen, en misschien zou gemakkelijk moeten zijn. Ik ben een fan van gewoon inlining die suckers, vooral wanneer ze zijn vrij eenvoudig.

Maar wat anders?

Logo ‘ s is een klassiek voorbeeld! Een heleboel mensen hun tenen duik op deze manier.

Je hoeft niet naar de inline SVG-als je het niet wilt. Het zou een <img> of achtergrond-afbeelding.

Dit zijn heel eenvoudige dingen al. Op het hart, SVG is gewoon een vector-gebaseerde image formaat geschikt voor zo ongeveer alles. Manier hoger op de complexiteit, schaal, Drukte maakt ongelooflijk cool stroomschema ‘ s met behulp van SVG.

Klik eens rond op deze stroomschema ‘ s en het zien van alle prachtige animatie. SVG is zeer flexibel schaalbaar. In dat voorbeeld hierboven, deel van wat er op er is een animatie van de viewBox in het bijzonder.

Het spreken van interactieve schema ‘ s, vrijwel elk diagram of grafiek zie je ofwel SVG-of begon het leven op die manier. Bijvoorbeeld, de ongelooflijk populair d3.js bibliotheek SVG gebaseerd. Alles gemaakt met d3 is SVG. In feite, de meeste diagrammen bibliotheken zijn gebaseerd op de d3. Hier is Highcharts:

Grafieken zijn dus zaken wel. Wat is kunst?! Natuurlijk, SVG is geweldig voor de kunst. Creatieve tools voor kunstenaars, zoals illustratoren werken op hun fancy Wacom-tablets, die werken in Adobe Illustrator, kan exporteren naar hun werk en weer te geven als SVG.

Er zijn ook animatie bibliotheken als GSAP die zijn goed in het helpen animeren SVG, en het inschakelen van vector kunstenaars om hun creaties tot leven:

Zie de Pen Lil Vikingen door Fabio (@FabioG) op CodePen.

Greensock heeft een aantal mooie zoete betaalde functies die u zou willen controleren.

SVG is geweldig voor kleine demonstratieve schema ‘ s! Hier is een klein ding van Rachel Nabors:

Zie de Pen-Toets Druk op de SVG-afbeelding met CSS animatie door Rachel Nabors (@rachelnabors) op CodePen.

Of games! Hier is één van Sarah Dranser:

Zie de Pen Reageren Spel – Olifant Taco Jagen door Sarah Drasner (@sdras) op CodePen.

Niet praktisch genoeg voor je? Hoe zit het met het feit dat een enkele SVG-bestand kan inkapselen van alle scripts en stijlen die nodig zijn voor een interactieve banner advertentie? Hier is Chris Gannon uit te leggen:

En een demo reclame maakte ik een keer:

Zie de Pen Wufoo SVG-Ad van Chris Coyier (@chriscoyier) op CodePen.

Kaarten zijn een andere geweldige use-case. amCharts heeft een heleboel gratis zijn voor u, en niet te vergeten Wikipedia houdt het SVG-formaat speciaal voor de iets geographic.

Wilt u meer weten? Ik heb een enorme verzameling van voorbeelden van de geweldige dingen die gedaan kunnen worden met SVG.

Wil je aan de slag met het leren SVG? Ik heb net het boek voor u:

Nu is het tijd om te kopen, want voor de volgende twee dagen 25% van de winst gaat naar RAICES:

De Wettelijke Vertegenwoordiging, Belangenbehartiging en Onderwijs Project zal voorzien in universele vertegenwoordiging uitgebracht voor niet-begeleide kinderen in Texas. Vorig jaar werden er meer dan 13.000 kinderen, die niet vertegenwoordigd in de immigratie rechtbank in Texas.

👍

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!