Der ultimative Leitfaden für SVG

Stellen Sie sich vor, Sie könnten ein Bild in eine Webseite einbetten, diese Seite auf eine beliebige Größe skalieren und niemals die Bildqualität verlieren. Ja, du kannst. Es ist absolut möglich, wir haben es nicht so gemacht wie wir sollten.

Bilder mit festen Größen wie JPG-Dateien, GIFs und PNGs haben ihren Platz im Web, aber ihre inhärent statische Natur widerspricht der Art, wie das Web läuft. Wenn wir zu reaktionsfreudigen, fließenden Designs übergehen, wird es immer ärgerlicher, mit Bildern zu tun zu haben, die grundsätzlich nicht ansprechbar sind. Es ist unglaublich frustrierend, wenn ich feststelle, dass es zur besten Praxis wird, mehrere verschiedene Versionen jedes Bildes auf Ihrer Website zu erstellen und bereitzustellen.

Ich erkenne, dass es dafür gute technische Gründe gibt. Es wird lange dauern, bis jemand zum Beispiel ein unendlich skalierendes Foto erstellt. Fotos sind jedoch nicht das A und O aller Bilder. Vektorgrafiken haben einen sehr langen Weg zurückgelegt. Sie gehen noch einen langen Weg.

Sie können schwieriger zu erwerben sein, weil nicht jeder Webdesigner ein Illustrator ist. Fotos sind reichlich vorhanden und gutes Bildmaterial ist leicht zu finden. Vektorgrafiken dagegen sind oft von geringer Qualität, oder vielleicht finden Sie einfach nicht die richtige. Einstellung von Illustratoren ist teuer.

Aber da die Unterstützung für Vektorgrafiken online wächst, wird auch ihre Verwendung zunehmen. Es ist an der Zeit, dass jeder lernt, sie auf ihren Websites zu implementieren und kreativ zu nutzen. Bilder so ansprechend wie unsere Webseiten sind die Zukunft.

Erfüllen Sie die SVG-Datei ...

Was ist SVG und warum sollten Sie es benutzen?

In Ordnung, für die Neulinge unter uns steht SVG für Scalable Vector Graphics. SVG-Dateien sind in der Theorie eher einfache Dinge. Sie sind nur Textdateien mit einer Menge XML im Inneren. Jedes Bit an visuellen Informationen in einer SVG-Datei wird durch einen lesbaren Code definiert, der dann von Ihrem Browser, Ihrer Grafiksoftware usw. berechnet und gerendert wird.

Dies bedeutet, dass SVG-Dateien zwar nicht so komplex sind, wie zum Beispiel ein Foto, das als JPG formatiert ist, sie jedoch unendlich viel flexibler sind. Sie können manuell in einem Texteditor geändert werden. Sie können durch Code wie JavaScript und CSS geändert werden. Sie können auf fast lächerlich kleine Größen komprimiert werden.

Mit anderen Worten, sie sind speziell für die Verwendung mit anderen Web-Technologien konzipiert. Sie sind perfekt für uns.

In den späten 90er Jahren, Macromedia und Microsoft (und andere Unternehmen) eingeführt VML und dann Adobe (und andere Firmen) vorgestellt PGML als mögliche Lösungen für Vektorbilder in Websites zum W3C (und möglicherweise als Alternativen zum alten PostScript-Format). Der W3C sagte: "Nein, wir werden unser eigenes Ding machen; Aber danke für die Ideen! "Das Ergebnis war der SVG-Arbeitsgruppe.

Im September 2001 wurde SVG 1.0 zu einer offiziellen W3C-Empfehlung und der Rest ist Geschichte. Irgendwie. Internet Explorer blieb beim SVG-Format zurück und überraschte niemanden. Seitdem gab es Updates für mobile Geräte und mehr mit Erklärungen.

Sogar jetzt erstellt die SVG Working Group SVG 2, die mehr Integrationsintegration mit Dingen wie HTML5, CSS und dem WOFF-Fontformat beinhalten wird.

Es hat Unterstützung

Die einzige Version von Internet Explorer, um die Sie sich jetzt kümmern müssen, ist IE8. Das ist es. Alle anderen haben mehr oder weniger vollen SVG-Support. Ja, Sie können gelegentlich auf Bugs stoßen, sogar in den "guten" Browsern, aber es lohnt sich immer noch. Nicht nur arbeiten um sie herum halten Ihre Problemlösungsfähigkeiten scharf, aber je mehr wir diese Technologie verwenden, desto mehr Browser-Entwickler werden es unterstützen.

Auschecken caniuse.com für eine tiefergehende Analyse dessen, was in welchen Browsern funktioniert und was nicht.

Alles reagiert ... oder sollte es sein

Die Internettechnologie ist viel weiter gegangen, weit über die statischen Websites hinaus, die wir früher kannten. Es ist an der Zeit, dass unsere Bilder schlicht und einfach auf den neuesten Stand gebracht werden. Wenn Sie ein Symbol erstellen müssen, verwenden Sie SVG. Wenn Sie eine Illustration verwenden müssen, gehen Sie für SVG, wenn Sie können. Wenn Sie einen abstrakten, aber dennoch einfachen Website-Hintergrund wünschen, verwenden Sie SVG.

Ich bin kein Fan der Retina-Screen-Technologie, vor allem, weil ich keine habe. Es ist keine Eifersucht. Nun, es ist nicht nur Eifersucht. Die einfache Tatsache ist, dass Retina-Bildschirme gegangen sind und das Servieren von Bildern viel komplizierter gemacht hat. SVG, das unendlich skalierbar ist, kann helfen, das Problem zu minimieren.

Zugänglichkeit

Benutzer, die sehbehindert sind, durchsuchen im Allgemeinen das Web mit etwas gezoomtem etwas. Wenn reguläre Bilder gezoomt werden, verlieren sie an Qualität. SVG wird das nicht tun, warum also nicht einen Vorteil daraus ziehen, um Sehbehinderten ein Qualitätserlebnis zu bieten?

Es kann helfen, Ihre Website zukunftssicher zu machen

Die Technologie verändert sich ständig. Was heute hier ist, könnte in einer Weile weg sein, aber SVG wird wahrscheinlich noch eine Weile da sein. Solange das W3C die globalen Industriestandards festlegt, wird SVG weiterhin der De-facto-Standard für Vektorgrafiken im Browser bleiben. Benutze es jetzt und deine Webseiten werden für eine lange Zeit eingestellt.

SVG Tutorials & Anleitungen

Du bist also überzeugt. SVG ist cool, es ist die Zukunft, es ist Zeit, es zu lernen. Zum Glück für alle ist dies das Internet. Sie wissen nur , dass die Menschen wertvolle Stunden damit verbracht haben, kostenloses Trainingsmaterial für jeden zu schaffen, der es will. Leute, die so etwas tun, sind die Leute, die das Internet großartig machen.

Dann gingen wir natürlich stundenlang durch die verschiedenen Tutorials, um die besten zu finden. Sie können uns später danken. Vorerst gibt es noch etwas zu lesen!

Hinweis: Beachten Sie, dass es sich bei SVG-Dateien ausschließlich um XML-Code handelt. Daher sind viele dieser Tutorials auf Entwickler ausgerichtet oder enthalten nur sehr viel Code. Wir haben beide Tutorials, die sich auf die Grundlagen und auf bestimmte, kreative Anwendungen für SVG konzentriert, enthalten, also überspringe diesen Teil nicht.

• Mit SVG: Chris Coyier schreibt seit Jahren leicht verständliche CSS- und HTML-Tutorials auf css-tricks.com. Seine Grundierung auf SVG ist nicht anders. Ich werde Links zu vielen grundlegenden Erklärungen und Tutorials einfügen, aber hier würde ich anfangen. Dieses Tutorial enthält grundlegende Anweisungen für Adobe Illustrator-Benutzer.
• Wie man mit SVG anfängt: Ich würde nachlässig sein, wenn ich nicht einschloß WDDs eigener Beitrag SVG-Bildung. Die immer fantastische Sara Vieira deckt das Erstellen Ihrer Grafiken, das Exportieren von Dateien, das Bereinigen des Codes, das Verschieben von Präsentationsattributen in CSS-Dateien und vieles mehr ab.
• Auflösung Unabhängigkeit mit SVG: Wenn es web-bezogen ist, dann hat Smashing Magazine wahrscheinlich einen Artikel darüber. Sie decken die Grundlagen des SVG-Formats mit ihrem üblichen Stil und Liebe zum Detail.
• Skalierbare Vektorgrafiken (eine Artikelserie ): Hongkiat.com ist eine weitere Quelle für hochwertiges Web- und Grafik-bezogenes Lernen. Anstatt nur einen langen Artikel zu veröffentlichen, haben sie veröffentlicht eine ganze Reihe von ihnen von Thoriq Firdaus. Das Englisch fehlt manchmal etwas, aber die Anweisungen sind immer noch klar und leicht zu verstehen.
• Sara Soueidan: Styling und Animation von skalierbaren Vektorgrafiken mit CSS: Das ist ein Video einer Präsentation Diese gibt es auf der CSSconf EU 2014. Darin gibt Sara Soueidan eine Reihe von Tipps, Tricks und sogar ein paar Hacks zum Anwenden von Stilen und Animationen auf SVG im Web. Es ist eine halbe Stunde lang, also machen Sie es sich bequem und halten Sie sich etwas mit Notizen zur Hand. Es ist deine Zeit absolut wert.
• Exportieren von SVG für das Web mit Adobe Illustrator CC: Adobe Illustrator-Benutzer sollten check das aus. Einer von Adobes eigenen Blogs enthält ausführliche und sehr detaillierte Anweisungen zum Exportieren von SVG-Dateien für das Web. Erfahren Sie, wie Sie sie auf die kleinste Dateigröße für das Web optimieren.
• SVGBasics: Das ganze Website ist es, Menschen beizubringen, wie man SVG-Grafiken von Grund auf mit XML erstellt. Ich empfehle dies für diejenigen, die mit dem eigentlichen Backend - oder sogar Front-End - einer Website zu tun haben. Zu wissen, wie der Code funktioniert, kann viel dazu beitragen, Probleme im laufenden Betrieb zu lösen.
• SVG Tutorial von Jakob Jenkov: Ein weiterer Entwickler-centric Satz von Tutorials, Hier. Der große Unterschied? Der Autor hat Videoversionen jeder Sektion hinzugefügt. Wenn Sie besser lernen, indem Sie sowohl Visuals als auch Audio für Ihren Unterricht verwenden, ist dies ein guter Anfang.
• Das einfache Intro zur SVG-Animation: Der Titel sagt alles. David Walsh erklärt, wie Sie Ihre SVG-Elemente für Animation, welche Attribute für verschiedene Elemente verwendet werden sollen, welche Bibliotheken zu verwenden sind und mehr. Es ist keine vollständige Anleitung, aber es wird Sie in die grundlegenden Konzepte einführen, die notwendig sind, um mit der Animation zu beginnen.
• Eine Einführung in die SVG-Animation: Dieses Tutorial geht ein bisschen genauer darauf ein, wie man SVG-Objekte animiert. Darüber hinaus werden einige allgemeine Probleme behoben, die beim Animieren auftreten können. Es lohnt sich also, sie zu lesen.
• Gewusst wie: Exportieren mehrerer Symbole in SVG-Dateien aus Adobe Illustrator: Erstellen einer Reihe von SVG-Symbolen in Illustrator? Sie alle in einer Illustrator-Datei speichern? Exportieren Sie sie alle zu ihren separaten Dateien mit einem einzigen Klick.
• Animierte Texte mit SVG-Pfaden: Genau das, was im Titel steht. Bekommen Sie Ihre Animation an, vielleicht benutze es auf einem Logo. Sicherlich sieht cool genug aus ...
• Animiere SVG-Icons mit CSS3 & JavaScript: Eine der größten Anwendungen von SVG ist für Icons, und das aus gutem Grund. Erstellen Sie eine Datei, verwenden Sie sie an beliebiger Stelle auf Ihrer Website oder in Ihrer App. Was können Sie mehr verlangen? Dieses Tutorial zeigt Ihnen, wie Sie diese Symbole bei Hover animieren können.
• Erstellen einer skalierbaren SVG-Infografik: Infografiken sind heutzutage eine der beliebtesten Methoden, um Fakten zu konsumieren. Warum nicht sie unendlich skalierbar machen? Werfen Sie etwas Animation, und Sie könnten sehr gut einige Köpfe wühlen.
• Making a SVG HTML Burger Button: Sagen Sie, was Sie über den Hamburger-Taste, wird es wahrscheinlich nirgendwo hin. Das kannst du auch Verwende SVG und Animation um es zum glänzendsten, coolsten Hamburger-Button zu machen. Dieser Abschnitt beschreibt, wie Pfade und Striche animiert werden können, um einen Button buchstäblich in einen anderen zu verwandeln.
• Snap.svg Beispiele und Tutorials: Dies ist ein Leitfaden Verwenden Sie die JavaScript-Bibliothek Snap.svg (siehe unten im Abschnitt "Tools"). Es wurde entwickelt, um Ihnen beim Erstellen von SVG-Elementen in JS zu helfen und sie zu animieren, interaktiv zu machen und so weiter.
• Einführung in Raphaël.js: Raphaël.js ist eine der großen SVG-bezogenen JavaScript-Bibliotheken, und Dieser Artikel lehrt dich, wie man es benutzt. (Siehe auch den folgenden Abschnitt Tools.)
• Animiertes SVG-Icon: Die Leute scheinen animierte Icons sehr zu mögen, so dass Sie genauso gut jeden Ansatz lernen können, um sie zu erstellen. Hier Wir sehen die Snap.svg-Bibliothek erneut in Aktion, während der Autor einen "Play" -Button für den Mediaplayer erstellt und animiert.
• Clipping in CSS und SVG - Die Clip-Pfad-Eigenschaft und -Element: Hier ist ein schöner langer Artikel darüber, wie SVG-Clipping verwendet wird, um Bilder in Formen und Bilder in großen Text zu machen. Sie könnten es verwenden, um große, ausgefallene Überschriften zu erstellen, die SEO-freundlich sind, weil Suchmaschinen-Bots sie lesen können.
• Erstellen von SVGs mit CSS: Obwohl SVG-Dateien unbegrenzt skalierbar sind, können die Methoden, die verwendet werden, um sie in eine Webseite zu integrieren, manchmal Probleme verursachen. Dieses Tutorial von Codrops erklärt, wie Sie die verschiedenen Probleme beheben können.
• Shape Hover-Effekt mit SVG: Erstellen Sie eine glatte und stilvoll aussehende animierter Hover-Effekt für Bildvorschauen. ( Schau dir die Demo an. )
• Ein SVG-Primer für die heutigen Browser des W3C: Nicht ganz zuletzt, und nicht zuletzt, haben wir eine Ressource zur Verfügung gestellt von den Leuten, die das SVG-Format überhaupt erfunden haben: das W3C. Es ist kein grundlegendes Tutorial oder eine Einführung. Nach dem Vorwort wurde es für professionelle Programmierer, Grafikdesigner mit "starker technischer Neigung" und andere, denen es nichts ausmacht, auf das Wesentliche zu kommen, geschaffen.
• SVG Tutorial von MDN: Wie SVGBasics, das ist ein ziemlich umfangreiche Lernprogramme, bereitgestellt vom Mozilla Developer Network. Obwohl es umfangreich ist, wird das Tutorial selbst als "in Entwicklung" betrachtet. Zum Beispiel kann dies derzeit auf der Seite "Filter" gesehen werden, die leer ist. Laut der Seite selbst befindet sich das Tutorial in einem frühen Stadium der Entwicklung. Wenn Sie dazu in der Lage sind, helfen Sie bitte, indem Sie ein oder zwei Absätze einfügen. Zusätzliche Punkte für das Schreiben einer ganzen Seite.

SVG-Werkzeuge

Einer der vielen Vorteile von SVGs offener Natur ist, dass jeder Software dafür machen kann. Es gibt keine Lizenzbeschränkungen oder Gebühren, nur ein offener Standard für die Nutzer. Wie zu erwarten war, haben viele Entwickler genau das getan.

Werkzeuge zum Erstellen und Verwenden des SVG-Formats sind reichlich vorhanden. Sie reichen von großen Softwarepaketen, die die Option enthalten, SVG nachträglich zu exportieren, zu Vektorzeichungs-Apps, die SVG als ihr primäres Format verwenden, und mehr.

Eine schnelle Google-Suche nach "SVG-Tools" gibt "Über 37.000.000 Ergebnisse" zurück, also wissen Sie, dass da draußen viel ist.

Wo solltest du anfangen?

Premium-Anwendungen

Die großen Namen in der Grafik-Erstellung unterstützen alle SVG. Adobe Illustrator,Coreldraw, sogar verschiedene Produkte von Xara - Ja, Xara ist immer noch eine Sache - sie können alle Dateien im Format importieren, bearbeiten und speichern. (Es ist bekannt, dass Illustrator einige seltsame Dinge in SVG-Dateien einfügt, daher müssen Sie bei den Exporteinstellungen vorsichtig sein.)

Inkscape

Wenn Sie nicht bereits ein Vektorgrafik-Paket verwenden, Inkscape ist ein fantastischer Ausgangspunkt. 2003 wurde Inkscape als Fork eines anderen Open-Source-Projekts namens Sodipodi (das wiederum auf einem anderen OSS-Projekt basierte) entwickelt und hat sich zum Standard für freie, plattformübergreifende Vektor-Grafiksoftware entwickelt. Es ist nicht so funktionsreich wie Adobe Illustrator, aber es ist mehr als genug für die meisten Vektorprojekte.

Serif DrawPlus Starter Edition

Serif ist eine Firma, die ziemlich gute Grafik-Erstellung und Desktop-Publishing-Software macht. Alle ihre Haupt-Software-Angebote werden mit kostenlosen "Starter-Editionen" ausgeliefert, und ihre Vektorgrafik-App ist keine Ausnahme.

Lassen Sie sich von der "Starter Edition" nicht täuschen. Es hat vielleicht nicht alles, was die Pro-Version hat, aber es kann die Arbeit in den meisten Fällen erledigen. Sofern Sie kein Illustrator sind, kann und wird diese App Ihre Anforderungen erfüllen ... vorausgesetzt, Sie sind auf Windows. Leider ist es nicht plattformübergreifend. Außerdem ist eine Registrierung für den Download erforderlich.

Karbon

Teil der Calligra Office Suite, die hauptsächlich für Linux gedacht ist, Karbon ist ein voll funktionsfähiges Vektorgrafik-Editor. Es hat alle grundlegenden Werkzeuge und ein paar Dinge neben. Die Installation auf Mac und Windows ist derzeit schwierig, wenn auch nicht unmöglich.

Druckdesign

Der Name klingt wie ein Softwarepaket aus den 90er Jahren, ich weiß, aber es ist eigentlich ziemlich neu. Tatsächlich ist es der Nachfolger der alten Illustrations-App sK1, die eingestellt wurde. Druckdesign befindet sich derzeit in der Phase "Preview" und hat sowohl Linux- als auch Windows-Versionen. Es ist noch nicht bereit für den Produktionseinsatz, aber es ist ein Projekt, das es sich zu sehen lohnt.

SVG-Bearbeitung

Der Name ist vielleicht ein bisschen auf der Nase, aber die Software ist mehr als fähig. SVG-Bearbeitung Basiert vollständig auf Web-Technologien, speziell HTML5, JavaScript und CSS. Dies bedeutet, dass es keine serverseitige Funktionalität gibt. Außerdem ist es Open Source, dh Sie können es herunterladen, auf Ihren eigenen Server stellen oder es einfach vom Desktop aus verwenden.

Es hat ein Merkmalsliste lang genug, um manche Desktop-App neidisch zu machen, und läuft schneller als die meisten von ihnen, also probier es aus.

Janvas

Janvas ist die einzige webbasierte App auf dieser Liste, die nicht unbedingt kostenlos ist. Es gibt eine 30-tägige Probezeit, nach der ein Abonnement 26 Euro pro Jahr kostet. Wenn dich keiner der anderen webbasierten SVG-Redakteure glücklich macht, denkst du vielleicht darüber nach.

Die Zeichenwerkzeuge sind weit fortgeschritten und vertraut genug, jede Variable kann in der Seitenleiste bearbeitet werden, und Sie können Ihre Dokumente in Google Drive speichern. Sie können Vorlagen erstellen, beim Zeichnen von Dokumenten zusammenarbeiten und sogar CSS- und JS-Dateien einbeziehen, die für die Interaktion mit den Grafiken erstellt wurden.

Alles in allem ist es ein solides Angebot.

Mondrian

Klein. Glatt. Einfach. Mondrian ist noch eine andere Open Source Angebot, und es ist viel kleiner als die meisten. Es hat nicht einmal ein Textwerkzeug ... aber es macht einfache Zeichnungen sehr gut. Sie können Dateien von der Festplatte oder einer URL öffnen, den Einbettungscode für Ihre Website abrufen oder Ihre Zeichnung einfach als SVG oder PNG speichern. Es ist vielleicht nicht so fortschrittlich wie andere Apps, aber es fühlt sich einfach gut an und das Stift-Werkzeug fühlt sich natürlich an.

Zeichne SVG

Zeichne SVG ist ein weiterer Web-basierter SVG-Editor mit allen Funktionen, die Sie jemals brauchen sollten. Der stärkste Punkt scheint die schiere Geschwindigkeit zu sein, mit der es Dinge lädt und zeichnet. Leider ist die Benutzerschnittstelle jedoch ernsthaft fehlerhaft. Trotzdem ist es da und es funktioniert, sollten Sie es jemals brauchen.

SVG-Bibliotheken

Entwickler freuen sich! Wir haben auch hier einige Links für Sie. Immerhin ist SVG nicht nur ein anderes Grafikformat. Es ist Code. Es ist Code, mit dem verknüpft oder eingebettet werden kann. Es kann mit der Fliege interagiert werden und geändert werden. Mit Mathe!

Snap.svg

Snap ist eine JS-Bibliothek zum Erzeugen und Interagieren mit SVG. Es ist für moderne Browser ausgelegt. Yup, das heißt, es unterstützt nur IE9 + ... aber wenn ältere Browser nicht Ihr Anliegen sind, gehen Sie dafür.

Raphaël

Raphaël, im Gegensatz zu Snap, ist kompatibel mit älteren Browsern. In der Tat kann es mit IE6 +, Safari 3+ und Chrome 5+ arbeiten. Wenn Sie beispielsweise etwas für ein Unternehmenssystem entwickeln, auf dem sich beispielsweise Benutzer auf älteren Maschinen befinden, könnte Raphaël die beste Wahl sein.

jQuery SVG

Wie SVG und jQuery? Ich bin nicht wirklich überrascht. jQuery hat vielleicht etwas von der Spotlight-Aufmerksamkeit verloren, die es einmal hatte, aber es ist immer noch eine Go-to-Library für viele von uns.

jQuery SVG, dann, ist möglicherweise das Plugin, das Sie suchen. Es hat Funktionen für Animationen, Diagramme und sogar Erweiterungen. Das ist richtig, Erweiterungen für ein Plugin. Browser-Unterstützung ist IE9 +, aber ältere Versionen von IE können mit den entsprechenden Browser-Plugins verwendet werden.

Ich bin jedoch nicht davon abhängig, dass die Benutzer diese Plugins haben.

SVGMagisch

SVGMagisch ist eine Drop-in, jQuery-basierte Lösung für ältere Browser (IE 7 & 8). Anstatt manuell Fallback-Images für jede verwendete SVG-Datei zu erstellen, kann dieses Plug-in diese im laufenden Betrieb generieren. Es behandelt auch Hintergrundbilder gut.

Wie macht es das? Es erkennt, ob der Browser des Benutzers mit SVG umgehen kann. Wenn ja, geht es schlafen. Ist dies nicht der Fall, kontaktiert es ein serverseitiges PHP-Skript und weist es an, eine PNG-Datei der fraglichen SVG-Bilder mit den erforderlichen Dimensionen zu erstellen.

Sobald dies geschehen ist, sendet das PHP-Skript die URLs an diese temporären Fallback-Images zurück an das jQuery-Plugin, und die Standard-URLs werden ersetzt. Dies erfordert natürlich Zeit, sodass Sie optional ein Platzhalterbild angeben können, das während der Konvertierung angezeigt wird.

Ein Vorbehalt: Zur Zeit kann es nicht zu viele Bilder gleichzeitig verarbeiten. Sie möchten diese Technik nicht auf Seiten mit mehr als ein paar SVG-Dateien verwenden.

SVG.JS

Schließlich, hier ist eine Option für die Byte-Zähler. SVG.JS wiegt nur 11,8 kb beim Zippen. Trotz seiner geringen Größe unterstützt es eine beeindruckende Anzahl von Funktionen (wie auf der Projektseite aufgelistet):

• Animationen zu Größe, Position, Transformationen, Farbe
• Schmerzfreie Verlängerung dank der modularen Struktur
• Verschiedene nützliche Plugins verfügbar
• Einheitliche API zwischen Formtypen mit Bewegung, Größe, Mitte
• Bindung von Ereignissen an Elemente
• Volle Unterstützung für Deckkraftmasken und Beschneidungspfade
• Textpfade, sogar animiert
• Elementgruppen und -sätze
• Dynamische Gradienten

Lies das Dokumentation Für mehr Information.

Lager SVG

Nicht jeder ist ein Illustrator. Zumindest war ich noch nie gut darin. So werden Lagerabbildungen zu einer unschätzbaren Ressource. Es kann jedoch schwierig sein, gute Sachen zu finden. Was nicht wie Microsoft Clipart aussieht, ist oft begrenzt oder teuer.

Verliere aber nicht die Hoffnung. Es gibt eine Menge Sachen, die von guter Qualität sind. Wenn es Ihre Bedürfnisse nicht perfekt erfüllt, nun, es ist Vektorgrafiken. Es besteht die Möglichkeit, dass Sie Ihre Bedürfnisse anpassen können, wenn Sie Grundkenntnisse in Vektorgrafiken haben.

SVG kann mehr als nur Illustrationsvorlagen. Sie können auch Muster, große Hintergründe, die keine Bandbreite verbrauchen, und mehr erstellen. Schauen wir uns an, was die Leute für uns gemacht haben:

SVG Clipart auf openclipart.com

SVG, als offenes Format, hat viele Open-Source-Enthusiasten als Fans. Infolgedessen ist es eines der primären Formate, die in dem verwendet werden, was sein könnte die größte Sammlung freier Clip Art dort draußen.

Und eine Menge davon ist clipart-ish. Und viel davon ist Amateurarbeit. Es gibt jedoch einige hochwertige Grafiken, wenn Sie schauen. Hey, es ist kostenlos.

SVG-Vorrat

SVG-Vorrat ist eine kleine Seite, mit einer relativ kleinen, aber ausgezeichneten Sammlung. Es sind hauptsächlich Icons und Gerätemodelle, aber sie sind alle von hoher Qualität. Wenn du eines dieser beiden Dinge brauchst, fang hier an.

SVG-Ressourcen auf deviantart.com

Ah DeviantArt, Diese riesige Gemeinschaft ist immer noch stark. Gehe in die Kategorie "Bilder" und suche nach SVG (oder klicke oben auf den Link). Auch hier wird die Qualität variieren, aber es gibt gute Dinge, wenn Sie Zeit haben, nachzusehen.

SVG-Mustergalerie

Eine kleine Galerie voller SVG-basierte Muster. Es ist eher ein Showcase, aber die Quelldateien sind alle für Ihre Bequemlichkeit da.

SVG-Muster von svgeneration.com

svgeneration.com enthält viele SVG-Muster für Ihre Verwendung. Die Website enthält Bearbeitungsoptionen für jedes Muster und Sie können den Code direkt auf der Website bearbeiten, um Ihre Änderungen in Aktion zu sehen. Dies ist nicht nur eine großartige Quelle für vorgefertigte Muster, sondern Sie können viel darüber herausfinden, wie sie hergestellt wurden.

SVG-Clipart

Die Kunst auf Diese Seite ist deutlich altmodisch Cartoon-Stil. Es wird, ehrlich gesagt, nicht das sein, was alle suchen, aber es ist für diejenigen da, die das klassische Gefühl für ihre Illustrationen haben wollen.

SVG-Studio

SVG-Studio bietet tausende Illustrationen mit einem ausgesprochen modernen Feeling. Sie können sie in kleinen Untersets kaufen oder den gesamten Katalog auf einmal herunterladen. Das bringt Ihnen 500 USD zurück, was für 3000 Illustrationen kein schlechter Deal ist.

SVG auf den größeren Lagerplätzen

Ich kann nicht viel über die Kunst sagen, die auf jeder Seite angeboten wird, da sie von den Autoren sehr unterschiedlich ist. Die größten Namen sind istockphoto.com,shutterstock.com,bigstockphoto.com, und canstockphoto.com.

SVG-Inspiration

Wir können alle Einführungen lesen, die wir wollen, und allen Tutorials folgen. Wir können Experten in jedem einzelnen Aspekt der SVG-Spezifikation werden, und dennoch können wir immer noch unglaublich langweilig dabei sein. Wir müssen das gesamte Potenzial einer bestimmten Technologie ausschöpfen, um es optimal zu nutzen.

Das ist jedoch oft leichter gesagt als getan. Es hilft oft, einen Bezugspunkt zu haben, etwas, das man sehen kann, und zeigt uns genau, was für tolle Dinge wir mit dem machen können, was wir haben. Das ist es, was Websites mögen Webcreme tat für Webdesign im Allgemeinen. Das ist, was CSS Zen Garten, und alle CSS-Galerien, die danach kamen, taten dies für CSS-Layouts.

Bis jetzt habe ich noch keine Galerie-Seiten gefunden, die sich dem widmen, was über SVG in Kombination mit anderen Web-Technologien erreicht werden kann, und das könnte helfen. In der Zwischenzeit finden Sie hier eine Auswahl an tollen Sachen, die wir gefunden haben:

Display-Anzeige einrasten

Dieses Beispiel ist Teil von Snap.svg Sammlung auf CodePen. Brauchen Sie ein perfektes Beispiel dafür, wie SVG verwendet werden könnte, um Online-Werbung zu revolutionieren? Das ist es.

Denken Sie darüber nach: Einige Anzeigenunternehmen verkaufen immer noch Anzeigen basierend auf der Pixelgröße. Dies macht keinen Sinn im Zeitalter der unendlichen Variation der Bildschirmgrößen, und Retina-Bildschirme zu booten. Bis wir mit einem besseren System als mit visuellen Anzeigen aufwarten konnten, konnte SVG uns zumindest dabei helfen, Anzeigen so anzupassen, dass sie dem Webdesign entsprechen.

Sieh den Stift Display-Anzeige einrasten von CJ Gammon ( @ Cjgammon ) auf CodePen .

Jtop Desktop-Oberfläche

Das Mozilla Developer Network, eine Einheit, mit der ich mich bei der Erforschung von Webtechnologien im Allgemeinen beschäftige, hat auch einige interessante Dinge hervorgebracht, die mit SVG erstellt wurden. Zum Beispiel gingen sie und machten eine vollständige Desktop-Oberfläche basiert ausschließlich auf Web-Technologien wie HTML5, JS, SVG und CSS. Es ist schnell, anpassbar und ich wünschte mir fast, es wäre Teil eines echten Betriebssystems.

Eine Zeit der Reflexion

Zu uns gebracht von ShinyDemos (was uns wiederum von den Leuten bei Oper ) Eine Zeit der Reflexion wird buchstäblich nur eine Uhr über einen Live-Feed von Ihrer Webcam überlagern. Nun, wenn du es erlaubst und du tatsächlich eine Kamera hast. Aber der Punkt ist, dass es zeigt, wie SVG-Masken auf fast alles überlagert werden können.

lorurlay

Durch eine Kombination von CSS, SVG und jQuery, lorurlay erstellt genau, was sein Name suggeriert: eine verschwommene Überlagerung, iOS-Stil. Es ist ein jQuery-Plugin, daher ist die Implementierung nicht schwierig und es zeigt auf anschauliche Weise, wie SVG-Filter auf alle Arten von Dingen angewendet werden können, nicht nur auf die SVG-Objekte selbst.

Codrops-Demos

Codrops (zuvor in der Tutorial-Sektion erwähnt) hat eine ganze Reihe von faszinierenden, beeindruckenden und einfach schönen Demos hervorgebracht, um zu zeigen, was SVG kann. Jeder verdient einen eigenen Abschnitt in diesem Artikel, aber es gibt so viele, dass ich sie alle in einen zusammenfasse. Wenn Sie in diesem Bereich "Inspiration" nichts anderes suchen, schauen Sie sich diese an. Schau dir die Demos an und lade die Quelldateien herunter. Dann geh und danke den Jungs von Codrops. Sie verdienen es.

Hinweis: Nicht alle sind SVG-fokussiert, aber alle verwenden SVG-Grafiken in irgendeiner Weise.

Seite Lade Effekte : eine Reihe von kreativen Seitenladeeffekten, die SVG-Animationen mit Snap.svg verwenden. Die Idee ist, ein Overlay mit einer interessanten Formanimation zu zeigen, während neue Inhalte geladen werden.

Ideen für subtile Hover-Effekte : einige kreative und subtile Hover-Effekte inspirieren mit modernen CSS-Techniken, einschließlich 3D-Translate und Pseudo-Elementen. Sie verwenden auch SVG. Schau dir das an Demo für die zweite Reihe von Effekten.

SVG Zeichnungsanimation : ein kleines Experiment, das die Verwendung von SVG-Linienzeichnungsanimationen vor dem Erscheinen von Grafiken oder Website-Elementen untersucht und deren Laden simuliert.

Off-Canvas-Menüeffekte : etwas Inspiration für Off-Canvas-Menüeffekte und Stile mit CSS-Übergängen und SVG-Pfadanimationen.

QuickInfo Stile Inspiration : eine kleine Sammlung verschiedener Hover Tooltip Styles und Effekte für deine Inspiration. Mit CSS-Transformationen, Border-Radius- und SVG-Formen können wir modern aussehende und interessante Tooltips erstellen.

Benachrichtigungsstile Inspiration : einige einfache Ideen und Effekte für unauffällige Website-Benachrichtigungen. Ein kleines Skript wird verwendet, um einige Stile zu präsentieren und CSS-Animationen werden für die Effekte verwendet.

Inspiration für benutzerdefinierte Auswahlelemente : Inspiration für das Design einer benutzerdefinierten Version des Select-Elements. Es gibt viele Möglichkeiten, und heute erkunden wir einige Ideen, wie der Benutzer eine Auswahl im Stil auswählen kann.

Inspiration für Inline-Anker-Stile : Inspiration für kreative und moderne Inline-Anker-Stile und Hover-Effekte mit verschiedenen Techniken wie Pseudo-Element-Übergängen und SVGs.

Pfeilnavigationsstile : etwas Inspiration für Pfeilnavigationsstile und Hover-Effekte mit SVG-Symbolen für die Pfeile und CSS-Übergängen und -Animationen für die Effekte.

Wackeliger Diashow-Effekt : Die Folien in dieser Diashow wackeln, während sie sich bewegen. Der Effekt basiert auf Sergey Valiukhs Dribbble-Aufnahme und wurde mit Snap.svg und Morphing-SVG-Pfaden erstellt. Bitte beachten Sie, dass dies sehr experimentell ist und nur in den neuesten Versionen moderner Browser getestet wurde.

Verpacken

SVG, noch nicht eines der am weitesten verbreiteten Bildformate, ist gut dokumentiert, stark unterstützt und es ist ein großer Teil der Zukunft des Internets. Wenn Sie es noch nicht als Teil Ihres Designprozesses verwenden, ist es wahrscheinlich an der Zeit zu beginnen.

Ausgewähltes Bild, nahtloser Vektor-Bild über Shutterstock.

• ← 10 kostenlose WordPress Plugins für Februar 2015
• 21 Collaboration Tools zur Optimierung Ihrer Teamarbeit →