Was ist SVG?

0
40

Y ‘ all wahrscheinlich wäre nicht überrascht, wenn ich Ihnen sagte, es ist ziemlich genial für die Symbole und die Symbol-Systeme. SVG-icon-Systeme können, und vielleicht sollte Recht einfach sein. Ich bin ein fan von nur inlining diese Saugnäpfe, besonders wenn Sie sind ziemlich einfach.

Aber was sonst?

Logos ist ein klassisches Beispiel! Eine Menge Leute Tauchen Ihre Zehen in dieser Weise.

Sie nicht haben, um inline-SVG, wenn Sie nicht wollen. Es könnte ein <img> oder background-image.

Diese sind wirklich einfache Dinge obwohl. Am Herzen, SVG ist einfach ein Vektor-basierte Bild-format in der Lage, gerade über alles. Weg höher auf der Skala Komplexität, Hektik schafft unglaublich cool Flussdiagramme mit SVG.

Versuchen Sie klicken, um diese Flussdiagramme und zu sehen, all das wunderbare animation. Das SVG-Format ist sehr flexibel skalierbar. In diesem Beispiel oben, ein Teil von dem, was dort passiert, ist eine animation des viewBox-spezifisch.

Apropos interaktive Diagramme, so ziemlich jede Grafik oder Grafik, die Sie sehen werden, ist, entweder SVG oder Leben begann auf diese Weise. Zum Beispiel, der unglaublich beliebt d3.js Bibliothek ist SVG basierend. Alles erstellt mit d3 SVG. In der Tat, die meisten charting-Bibliotheken basieren auf d3. Hier ist Highcharts:

Charts sind so business aber. Was ist mit Kunst?! Natürlich, SVG ist Super für die Kunst. Kreativ-tools für Künstlerinnen und Künstler, wie Illustratoren arbeiten auf Ihre Lust Wacom-tablets, die in Adobe Illustrator arbeiten, können Sie exportieren Sie Ihre Arbeit und zeigen Sie es als SVG.

Es gibt auch animation Bibliotheken, wie GSAP, die groß sind zu helfen, animieren von SVG, und aktivieren Vektor-Künstler bringen Ihre Kreationen zum Leben:

Finden Sie den Stift Lil Wikinger von Fabio (@FabioG) auf CodePen.

Greensock hat einige ziemlich süß bezahlt features, die Sie möglicherweise wollen überprüfen Sie es heraus.

SVG ist ideal für kleine anschauliche Diagramme! Hier ist eine kleine Sache, die von Rachel Nachbarn:

Finden Sie die Stift-Taste Drücken SVG-Darstellung mit CSS-animation von Rachel Nachbarn (@rachelnabors) auf CodePen.

Oder Spiele! Hier ist einer, der von Sarah Dranser:

Finden Sie den Stift Reagieren Spiel – Elefant Taco Jagd von Sarah Drasner (@sdras) auf CodePen.

Nicht praktisch genug für Sie? Wie über die Tatsache, dass eine einzelne SVG-Datei können die Kapseln alle Skripte und Stile, die für eine interaktive Werbebanner? Hier ist Chris Gannon erklären:

Und ein demo-Werbung habe ich gemacht:

Finden Sie den Stift Wufoo SVG-Anzeige von Chris Coyier (@chriscoyier) auf CodePen.

Karten sind eine weitere erstaunliche use-case. amCharts hat eine Reihe von kostenlosen Tools für Sie, nicht zu erwähnen, Wikipedia liebt das SVG-format besonders für alles, was geographic.

Sie wollen mehr? Ich habe eine riesige Sammlung von Beispielen, die erstaunliche Dinge, die getan werden kann mit SVG.

Wanna get started learning SVG? Ich habe nur das Buch für Sie:

Jetzt ist die Zeit zu kaufen, wie auch, weil für die nächsten zwei Tage 25% der Gewinne gehen an RAICES:

Die Rechtliche Vertretung, Interessenvertretung und Bildung Projekt wird eine Universelle Darstellung für veröffentlichte, unbegleitete Kinder in Texas. Im letzten Jahr waren es über 13.000 Kinder, die nicht vertreten wurden in der Einwanderungs-Gericht in Texas.

👍

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die Sicherheit und backups, Markdown-support, site-Suche, Kommentar-Formularen, social-network-verbindungen und vieles mehr!