Ein Kompendium von SVG Informationen

Ein riesiger Haufen von Informationen über SVG.

Wie man SVG verwendet

Dies sind Übersichtsartikel, die viele Dinge im Zusammenhang mit SVG behandeln. Warum man es benutzt und die Grundlagen der Anwendung. Hauptsächlich: <img>, background-image, <svg>, <iframe> und <object>/<embed>.

• SVG verwenden von mir
• SVG im Web – Ein praktischer Leitfaden von Jake Giltsoff.
• Auflösungsunabhängigkeit mit SVG von David Bushell (und seine Use SVG Teil 1 und Teil 2)
• SVG auf MDN
• So fügen Sie skalierbare Vektorgrafiken zu Ihrer Webseite hinzu von Craig Buckler
• SVG-Workflow für Designer von Dan Mall
• Ezequiel Bruni's Ultimativer Leitfaden zu SVG

SVG als Icon-System

SVG eignet sich besonders gut für Icons. Neben der Auflösungsunabhängigkeit und den Styling-Möglichkeiten sind die Formen für Icons im Allgemeinen einfach, sodass die Dateigröße winzig ist und sie wie bei einem Sprite oder einer Icon-Schriftart in einer einzigen Webanfrage kombiniert werden können.

Ich habe viel darüber geschrieben

• Icon-System mit SVG-Sprites
• Die gesamte Idee basiert im Wesentlichen auf SVG-Templating
• SVG-Sprites vs. Icon-Schriftarten – Ian Feather hat einige gute Gründe, sich für SVG gegenüber Icon-Schriftarten zu entscheiden.
• Verwendung von <symbol> für Icons
• Verwendung von <use> mit einer externen Quelle. Da es besser gecached wird. Das Problem ist IE, aber SVG4Everybody behebt das. Alternativ einfach den gesamten SVG-Chunk per Ajax einladen und in das Dokument einfügen (Mini-Bibliothek dafür). Microsoft Edge behebt dies möglicherweise.
• Kaskadierende SVG-fill-Farbe (d.h. die Icons passen zur Textfarbe, in deren Nähe sie sich befinden)
• Es gibt zwei Ansätze für die Größenbestimmung von Zeichenflächen... alle gleich machen (oder zumindest das gleiche Seitenverhältnis) oder auf die Ränder zuschneiden. Hier ist ein Vergleichsartikel.

Und mehr von anderen

• Jedes SVG-Bit kann inline und als Icon verwendet werden, aber hier sind einige schöne, sofort einsatzbereite mit einer ansprechenden Klick-für-den-Code-Oberfläche von Baptiste Briel. Evil Icons ist eine weitere Icon-Sammlung, die Code zur Integration enthält.
• SVG Icons FTW von Oleg Solomka
• Google sagt machen Sie es.
• iconmelon: „SVG-Icons-Bibliothek für das Web“ – mit einigen Sets, die einzigartige SVG-Dinge nutzen, wie Mehrfarbigkeit, was besonders schwierig, aber möglich mit Icon-Schriftarten ist.
• Thomas Fuchs „hat Icon-Schriftarten zugunsten von Inline-SVG aufgegeben“ und spricht über einige Build-Prozess-Sachen zur Automatisierung der Aufgabe.
• Eine Übersicht über Techniken zur Erstellung von SVG-Sprites von Sara Soueidan
• SVG-Sprite im localStorage cachen von Osvaldas Valutis
• SVG-Sprites und Icon-Systeme sind super von Joni Trythall
• Wenn Sie <use> mehrmals für dasselbe Icon verwenden, können Sie jedes davon unterschiedlich einfärben, indem Sie dem Elternelement eine andere fill zuweisen und diese dann nach unten kaskadieren lassen. Damit das funktioniert, müssen Sie die Füllung bei den Formelementen weglassen, was bedeutet, dass Sie meist auf einfarbige Icons beschränkt sind. Zwei Farben sind jedoch möglich, indem Sie currentColor verwenden. Sie können auch native CSS-Variablen für noch mehr Leistung nutzen.
• SVG-<use>-Inhalt stylen mit CSS von Sara Soueidan
• Einige browserübergreifende Nuancen von Florent Verschelde.
• WordPress' Plan, von einer Icon-Schriftart zu SVG zu wechseln

Das alles basiert auf Inline-SVG als System, was ein fantastischer Weg ist, aber wenn Sie sich für SVG als CSS-Hintergrundbild entscheiden...

• Filament Groups Grunticon: Artikel, Repo, In-Browser-Tool. Wandelt einen Ordner mit SVGs in SVG-Daten-URIs und Fallbacks von dort aus um. Grunticon 2 kann progressiv bis zu Inline-SVG aufwerten. Sie können auch mit Inline-SVG beginnen und auf Grunticon zurückfallen.
• Sie können die Füllung bei SVG als Hintergrundbild nicht im laufenden Betrieb anpassen (Grunticon schlägt vor, einfach mehrere Versionen zu erstellen, da GZip damit so effizient ist). Aber hier ist eine clevere Technik von Zach Schnackel, die einen CSS-Präzessor verwendet, um die Datei zu greifen, in eine Daten-URI umzuwandeln und dann die Füllungen durch eine neue Farbe zu ersetzen.
• Wenn Sie SVG, das als Hintergrundbild verwendet wird, farbig gestalten möchten, ist das etwas schwierig, da Sie in CSS keine direkte Kontrolle darüber haben. Noah Blon hat jedoch einige Techniken.

Und denken Sie daran, wenn Sie nach zu verwendenden SVG-Icons suchen, kann jedes Vektorobjekt verwendet werden. Sie müssen nicht speziell nach „SVG-Icons“ suchen. Selbst bei Icon-Schriftarten können Sie diese Schriftart lokal aktivieren, das gewünschte Zeichen für das Icon eingeben, es in Umrisse konvertieren und als SVG speichern.

Hier sind einige Web-Apps, die in Inline-SVG-Sprites exportieren

• IcoMoon
• Fontastic (Ankündigung)
• Smarticons (und Glyph)
• font-blast extrahiert die Icons aus einer Schriftart in einzelne SVGs

SVG-Formensyntax

• Grundformen auf W3.org
• Das <path>-Element hat seine eigene Mikrosyntax. Chris Nager stellt dies in Bespoke SVG Reference vor.
• Steven Bradley behandelt auch Pfad-„Linienbefehle“ durch ein einfaches Tutorial.
• Adam Pearce demonstriert, wie die Pfadsyntax funktioniert durch interaktive Demos, einschließlich, wie die komplexen kubischen Bézier-Sachen funktionieren.
• Demo zur Manipulation von <path>-Daten von Sten Hougaard.
• Grundformen von J. David Eisenberg
• Einführung in skalierbare Vektorgrafiken (SVG) von Aaron Lumsden.
• So erstellen Sie SVG-Pfeilspitzen und Polymarker (das <marker>-Element) von Steven Bradley.
• Ein GUI-Tool von Brent Jackson zur Visualisierung/Erstellung der Pfadsyntax.

SVG-Muster

In SVG können Sie Formen mit Farben und Verläufen füllen, aber Sie können auch ein <pattern> angeben, mit dem gefüllt werden soll. <pattern>s sind Gruppen anderer SVG-Elemente, die sich wiederholen, also ist es so etwas wie ein <svg> in Ihrem <svg> zu platzieren.

• SVG-Muster von Matthew Bystedt
• So verwenden Sie SVG-Muster von Joni Trythall
• SVG-Muster-Galerie von Philip Rogers
• SVG-Füllmuster von Jakob Jenkov
• Muster auf MDN
• PatternBolt (Sammlung einfacher SVG-Muster).
• SVG-Mustergenerator (lustig!)
• Plain Pattern: Ein SVG-basierter Hersteller nahtloser Muster
• Dies ist nicht wirklich über <pattern>, aber SVGeneration erstellt SVG zur Verwendung als Hintergrundbild, von denen einige sich wie das Konzept eines Musters wiederholen.
• Erstellen Sie komplexere Muster mit Bildern, Attributen und Verschachtelungen von Steven Bradley.
• So exportieren Sie SVG-Muster von James George
• PatternFills von Irene Ros.

SVG-Größe (Viewport, viewBox und preserveAspectRatio)

Das Browserfenster, das Sie gerade betrachten, ist ein Viewport. Wenn sich ein <iframe> auf der Seite befände, hätte dieser seinen eigenen Viewport. Das gilt auch für <svg>! Es ist jedoch etwas knifflig, da SVG auch eine viewBox hat, die den tatsächlichen Bereich darstellt, in dem die SVG-Elemente gezeichnet werden. Diese bestimmt zusammen mit preserveAspectRatio, wie und wo die SVG-Elemente innerhalb dieses Viewports gezeichnet werden.

• SVG-Koordinatensysteme und Transformationen verstehen von Sara Soueidan
  • (Teil 1) – Der Viewport, viewBox und preserveAspectRatio (mit einer schönen Demo)
  • (Teil 2) – Das transform-Attribut
  • (Teil 3) – Neue Viewports festlegen
  • Art-Direction von SVG-Bildern mit dem viewBox-Attribut
• Ein Blick auf SVG viewBox und viewport von Joni Trythall
• SVG Viewport und View Box von Jakob Jenkov
• Ein Blick auf preserveAspectRatio in SVG von Joni Trythall
• preserveAspectRatio auf MDN
• SVG und die preserveAspectRatio-Eigenschaft von Giovanni DiFeterici
• Die SVG-Leinwand, das Koordinatensystem und der Viewport von Steven Bradley
• Verwendung von Canvas zur Behebung von SVG-Skalierung in Internet Explorer von Nicolas Gallagher.

SVG-Verläufe

Während eine fill in SVG nur ein Attribut ist (oder in CSS angewendet wird), sind SVG-Verläufe buchstäblich ein spezielles Element: <linearGradient>. CSS hat ebenfalls Verläufe, aber da SVG-Verläufe (sein können) im DOM vorhanden sind, gibt es möglicherweise Fälle, in denen sie einfacher zu manipulieren sind.

Außerdem funktionieren sie in IE 9, wo CSS-Verläufe nicht funktionieren.

• Erste Schritte mit SVG-Verläufen von Joni Trythall. Und ihr Nachfolgeartikel, der einige Eigenheiten mit spreadMethod und dem values-Attribut für Animationen erwähnt.
• SVG-Verläufe animieren von Joni Trythall
• SVG-Verläufe von Jakob Jenkov
• CSS-Verläufe sind schneller als SVG-Hintergründe von Lea Verou
• Lineare Interpolation von Farben in einem Dreieck mit SVG (Gouraud-Schattierung)
• Dieser Artikel von Alex Walker ist etwas alt und voller Link-Ködern, enthält aber einige gute Einführungsinformationen zu Verläufen.
• SVG-Verläufe können eine Opazität durch die Verwendung von stop-opacity haben, wie Matthew Miller uns zeigt.
• SVG Radiant ist ein sehr gutes Werkzeug zum Erstellen von SVG-Verläufen. Wenn Sie den (2)-Punkt nach oben ziehen, weg von der unteren rechten Ecke, können Sie ein gutes Gefühl für den Unterschied zwischen Pad/Repeat/Reflect bekommen. Dieses hier ist auch ziemlich gut und gibt den erstellten Verlauf nicht nur als SVG, sondern auch als CSS oder Canvas aus. Und ein weiteres von Microsoft. Dieses hier ist vielleicht zu vereinfacht.
• Anwenden von SVG-Verläufen auf eine Füllung oder einen Strich von Steven Bradly.
• Bereinigen doppelter SVG-Verlaufspunkte und Verschieben in defs (Tool) von Jake Albaugh

SVG und Fragment-Identifikatoren

Das <use>-Element in SVG ermöglicht es Ihnen, ein SVG-Segment zur Wiederverwendung woanders zu kopieren. Aber das funktioniert nur für Inline-SVG. Wenn Sie nur bestimmte Teile innerhalb einer SVG-Datei in CSS (background-image) oder HTML (<img>) verwenden möchten, benötigen Sie Fragment-Identifikatoren.

• So funktionieren SVG-Fragment-Identifikatoren von mir
• Bessere SVG-Sprites mit Fragment-Identifikatoren von Peter Gasston
• simurai denkt darüber nach, warum dies so nützlich wäre: SVG-Stacks
• Demo davon in <img> und background-image
• Demo aus den Spezifikationen
• Kann ich verwenden… Unterstützung

SVG-Linienzüge

SVG dreht sich alles um das Zeichnen von Formen. Genau wie in einem Designprogramm wie Adobe Illustrator können Sie diesen Formen Linienzüge sowie Füllungen zuweisen.

• Verwendung von SVG-Linienzug-Attributen von Joni Trythall (z.B. stroke-linecap, stroke-linejoin, stroke-dashoffset usw.)
• SVG-Linienzug von Jakob Jenkov
• Linienzug-Eigenschaften auf W3.org
• Eine beliebte Animationstechnik ist das „Zeichnen“ des Linienzugs von Formen
  • So funktioniert die SVG-Linienanimation
  • Animierte Linienzeichnung in SVG von Jake Archibald.
  • SVG-Zeichenanimation
  • Polygon Feature Design: SVG-Animationen für Spaß und Profit
  • Walkway.js – „Eine einfache Möglichkeit, SVG-Bilder zu animieren, die aus Linien- und Pfadelementen bestehen.“
  • Lazy Line Painter (jQuery-Plugin)
  • vivus
• SVG-Linienzüge skalieren normalerweise relativ zum Viewport des SVG, aber das müssen sie nicht. Sie können sicherstellen, dass sie die eingestellte Breite beibehalten, mit vector-effect: non-scaling-stroke; (Demo).

SVG und Text

SVG hat ein <text>-Element, das es Ihnen ermöglicht, (Sie ahnten es) Text zu einer Grafik hinzuzufügen. Echter, nativer Webtext, keine Zeichekonturen, was 1) ihn nützlicher macht (auswählbar, durchsuchbar) 2) ihn zugänglicher macht 3) die Größe reduziert. Genau wie regulärer Webtext sind die verfügbaren Schriftarten auf das beschränkt, was auf einem bestimmten Browser/Plattform/Version verfügbar ist oder über @font-face geladen wird.

• SVG `text` und kleine, skalierbare, zugängliche typografische Designs von mir
• SVG-Filter auf Text von Chris Scott
• Es gibt ein Unterelement von <text> namens <tspan>, mit dem Sie die Formatierung von Teilen eines größeren Textes beeinflussen können. SVG tspan-Element von Jakob Jenkov
• Text in SVG (Text, tspan, tref) von Matthew Bystedt. tref ist interessant – es ermöglicht Ihnen, ein Textstück für spätere Verwendung zu definieren, ähnlich wie alles in <defs>, Filter, Verläufe, use usw.
• Text einfach vertikal zentrieren, mit SVG! von Lea Verou
• Browserübergreifende SVG-Textpfade von Zoltan Hawryluk
• SVG-Textelement von Sebastian Gutierrez: „Warum es wichtig ist und wie wir es in unseren D3.js-Datenvisualisierungen verwenden“
• Textfluss in SVG: Ein Schritt vorwärts, ein Schritt zurück von Tavmjong Bah. SVG 1.1 kann Text nicht umbrechen (eine ziemliche Einschränkung), aber das sollte in SVG 2 kommen.
• SVG-Text macht Ideen wie FitText einfacher: Fitter Happier Text.
• Letterbolt: animierte SVG-Schriftart.

SVG animieren

Es gibt drei Möglichkeiten, SVG zu animieren. CSS und SMIL sind die „deklarativen“ Methoden, und natürlich kann auch JavaScript dies tun.

SMIL

Die SVG-Syntax verfügt über ein <animate>-Tag speziell dafür, obwohl es etwas kompliziert ist. Dies wird als SMIL (Synchronized Multimedia Integration Language) bezeichnet, und SVG erweitert dies ebenfalls.

• Warnung: SMIL wurde nie in Internet Explorer unterstützt und Blink hat eine „Absicht zu verwerfen“-Warnung.
• Ein Leitfaden zu SVG-Animationen (SMIL) von Sara Soueidan.
• SVG-Animation mit SMIL auf MDN
• Mit SMIL können Sie ein <path> (oder andere Formen) zu einer völlig anderen Koordinatenmenge animieren (solange es die gleiche Anzahl von Punkten hat), wodurch ein Formmorphing-Effekt entsteht, der supercool sein kann. Tutorial dazu von Felix Hornoiu.
• So funktioniert SVG-Form-Morphing von mir
• Eine Einführung in SVG-Animationen mit SMIL von Noah Blon
• Sammlung von SMIL-Animationen
• Radialer Parallax mit SVG, SMIL und CSS von Adam Guttentag
• Animiertes SVG-Textnachrichten-Video-Overlay von Adam Guttentag
• SMIL ist nicht nur <animate />, sondern auch <animateTransform />. Demo. MDN.
• Eine Einführung in SVG-Animation von Ryan Allen

CSS

Wenn Sie Inline-SVG verwenden, können Sie auch das SVG (oder darin enthaltene Formen) mit CSS ansprechen und mit CSS-Animationen animieren.

• SVG mit CSS animieren von mir
• So funktioniert die SVG-Linienanimation von mir. Jordan Wade hat auch einige Beispiele für Linienanimationen im Code School Blog erstellt.
• SVG-Glitch – mit SMIL oder mit mehreren Elementen und CSS-Clip.
• SVG mit CSS animieren von Jonathan Suh
• Wie man festliche SVG-Icons mit CSS animiert von Noah Blon
• Interaktive Infografik mit SVG und CSS-Animationen von Adam Coulombe
• Einige verschiedene Möglichkeiten, SVG-Sprites in Animationen zu verwenden von Sarah Drasner

JavaScript

Sie können auch JavaScript verwenden, um SVG zu manipulieren (und damit zu animieren). Sehen Sie auch die Bibliotheken im nächsten Abschnitt. Diese haben tendenziell Animationsfähigkeiten.

• Vektoren mit SVG animieren von Brian Suda
• SVG-Animation mit JavaScript von David Dailey
• Animierte SVG-Icons und elastische SVG-Elemente mit Snap.svg von Mary Lou
• Animiertes SVG-Icon (Snap.svg) von Sebastiano Guerriero
• SVG Circus – In-Browser-Tool zum Erstellen von (meist Schleifen-)Animationen. Gibt sein eigenes benutzerdefiniertes JavaScript aus, um die Animation durchzuführen. Es ist Open Source.
• Dieser Artikel führt ein, wie SVG-Animation über Velocity.js erfolgen kann. „Velocity.js erkennt automatisch, wenn es zum Animieren eines SVG-Elements verwendet wird, und wendet nahtlos SVG-spezifische Eigenschaften an, ohne dass Sie Ihren Code ändern müssen.“
• Greensock macht auch SVG-Animation (Demo) und behebt eine Reihe von Problemen mit SVG-Transformationen über CSS.
• SVG Morpheus von Alex Kaul: „JavaScript-Bibliothek, die es SVG-Icons ermöglicht, von einem zum anderen zu morphieren.“

Sonstiges

• Die Leute von Playground haben einige schöne SVG-Animationen für ihre Homepage erstellt. Sie haben über ihren Prozess geschrieben, der letztendlich auf einer eher benutzerdefinierten Frame-by-Frame-Sache basierte als auf den oben genannten Methoden.
• Kyle Conrad über SVG animieren: Die Rückkehr. Die Prüfungen, Widrigkeiten und Methoden der Vektoranimation.
• Der Stand der SVG-Animation von Sara Soueidan
• Die sieben Stufen von SVG von Chris Gannon

Und nur zum Spaß, schauen Sie sich diese Sammlung von SVG-Animationen von Dennis Gaebel an.

SVG-JavaScript-Bibliotheken

• D3.js (Data-Driven Documents) von Mike Bostock
• Snap.svg (Neueres Ding von Dmitry Baranovskiy/Adobe – so etwas wie das „jQuery von SVG“d) (Leitfaden für den Einstieg von Sara Vieira)
• Raphaël (Älteres Ding von Dmitry Baranovskiy)
• Bonsai – „Eine leichte Grafikbibliothek mit einer intuitiven Grafik-API und einem SVG-Renderer.“
• SVG.js von Wout Fierens
• Fabric.js (SVG-zu-Canvas & Canvas-zu-SVG) von Juriy Zaytsev
• Two.js – „Eine zweidimensionale Zeichen-API für moderne Webbrowser. Sie ist renderer-unabhängig und ermöglicht die gleiche API, um in mehreren Kontexten zu zeichnen: SVG, Canvas und WebGL.“
• Paths.js – „Generieren Sie SVG-Pfade für geometrische Formen“
• VLEX – „Vector Layout Expressions“
• jQuery kann mit seinen DOM-Manipulationsfähigkeiten Inline-SVG-Attribute ändern und allgemein mit dem SVG-DOM umgehen, hat aber Schwierigkeiten beim Erstellen und Einfügen eines <svg>-Elements, da es den richtigen Namespace nicht verwendet. Lösung: zuerst in einem <div> platzieren.
• deSVG von Ben Howdle ersetzt <img>-SVG durch Inline-SVG, das es per Ajax lädt, sodass Sie es stylen und all die fantastischen Dinge tun können, die Sie mit Inline-SVG tun können. Vorsicht: doppelte Anfragen.

Diagramme mit SVG

SVG hat keine speziellen Diagrammfunktionen, aber es verfügt über viele Funktionen, die sich gut für die Erstellung von Diagrammen eignen.

• In So erstellen Sie Diagramme mit SVG zeigen wir einige Möglichkeiten, Torten-, Linien-, Balken- und Streudiagramme zu erstellen.

Es gibt auch sehr funktionsreiche Bibliotheken, die großartige Diagramme erstellen können. Wie

• amCharts
• Highcharts

SVG organisieren

Ähnlich wie es HTML-Tags zur Organisation von Inhalten gibt, gibt es SVG-Tags zur Organisation von Grafiken. Zum Beispiel ist das <g> (Gruppe)-Tag analog zu <div>. Es hat keine große Bedeutung für sich allein, aber es ist nützlich, weil es bedeutet, dass Sie es stylen und diese Stile auf die gesamte Gruppe anwenden lassen können.

• Strukturierung, Gruppierung und Referenzierung in SVG – Die Elemente <g>, <use>, <defs> und <symbol> von Sara Soueidan
• SVG `symbol` eine gute Wahl für Icons von mir
• So definieren Sie SVG-Inhalte zur Wiederverwendung – Die Elemente defs, symbol und use von Steven Bradley

SVG und Schriftarten

• Es gab eine Zeit, da haben @font-face-Generatoren eine .svg-Version von Schriftarten erstellt. Ich glaube, das war für eine bestimmte Generation von iPads erforderlich. Es war nicht wirklich ein eigenes Format, sondern ein weiteres Schriftformat, das in SVG eingebettet war, was es zum Laufen brachte. Ich glaube, wir machen das jetzt nicht mehr oder sprechen darüber.
• SVG & Farben in OpenType-Schriftarten von Johannes Lang

SVG-Clipping / Maskierung

Sie können Formen/Pfade zeichnen, die verwendet werden, um andere Formen/Pfade auszublenden, die sich innerhalb/außerhalb von ihnen befinden.

• Clipping in CSS und SVG – Die clip-path-Eigenschaft und das `clipPath`-Element von Sara Soueidan
• SVG mit Clipping-Masken und CSS animieren von Joe Howard
• Clipping und Maskierung auf MDN
• SVG ist ein guter Kandidat für CSS-border-image, da border-image viel Skalierung und Wiederholung leistet, was SVG gut kann.
• Apropos border-image, das in einer 9-Slice-Skalierung (denken Sie an ein Tic-Tac-Toe-Brett) funktioniert, hier ist eine Technik von Dirk Weber, die eine 4-Slice-Skalierung verwendet, bei der „wir in der Lage sein werden, unregelmäßig geformte Umrisse um Elemente zu erstellen und beliebige Eckstile zu erstellen.“
• Dirk hat auch über 9-Slice-Skalierung geschrieben.
• Peter Hrynkow über die Verwendung einer Schwarz-Weiß-PNG als SVG-Maske über einem JPG – für gute Bildkompression mit echter Transparenz. ZorroSVG ist ein Werkzeug dafür.
• Die gleiche Technik, anders präsentiert von Dirk Weber als Anwenden von Alpha-Kanälen auf JPGs
• Maskierung von SVG-Animationen von Nathan Gordon
• SVG-Muster, Rotation und Clippaths von Adam Guttentag
• Demo (Happy Halloween) von Bear Travis, inspiriert von CJ Gammons Design.

SVG-Build-Tools

Eine gängige Methode, mit SVG auf einer Website zu arbeiten, ist die Verwendung eines „Ordners voller SVGs“, die Sie auf der gesamten Website verwenden möchten. Aus Performance-Gründen möchten Sie nicht jede einzeln anfordern. Diese Build-Tools helfen dabei, sie auf die eine oder andere Weise zu kombinieren. Oder sie helfen Ihnen, etwas Nützliches mit SVG zu tun.

In-Browser-Tools

• IcoMoon von Keyamoon (wählen Sie Icons aus, die Sie verwenden möchten, geben Sie nur diese als SVG-Sprite aus. Ziehen und ablegen auf Ihre eigenen SVGs. Projekt speichern, um es später zu aktualisieren.)
• Fontastic gibt ebenfalls als SVG-Sprite aus
• Iconizr von Joschi Kuphal (Repo) (viele Funktionen kombiniert)

Grunt

• grunt-svgstore von Fabrice Weinberg (Ordner mit SVGs zu SVG-Sprite kombinieren). Gulp-Version.
• grunt-dr-svg-sprites von Danish Broadcasting Corporation erstellt ebenfalls ein SVG-Sprite und PNG-Fallbacks.
• grunt-svg-sprite von Joschi Kuphal (Ordner mit SVGs zu SVG-Sprite kombinieren, mit CSS-Präzessor-Ausgabe)
• grunt-svg-modify – Erstellt Breiten-/Höhen-/Farbvarianten von SVG-Bildern von yoskel.
• Grunticon von Filament Group

Gulp

• gulp-svg-sprites von Shane Osbourne (Ordner mit SVGs zu SVG-Sprite kombinieren). Tutorial zur Verwendung dieses Tools von Mike Street
• gulp-svgfallback von Andrey Kuzmin erstellt einen PNG-Sprite aus SVGs
• SVG-Sprites mit Gulp und Sass erstellen von Mike Street
• Erstellen Sie eigene SVG-Sprite-Sheets mit Bower und Gulp von Alexander Synaptic

Nur Kommandozeile

• SVG-Stacker von Michael Schieben

SVG zum Verwenden erhalten

Es gibt eine Reihe von Möglichkeiten, um an das benötigte SVG zu gelangen.

• Lernen Sie die SVG-Syntax. (siehe Abschnitt)
• Lernen Sie, Vektorbearbeitungssoftware zu verwenden. (siehe Abschnitt)
• Laden Sie Vektorobjekte aus dem Internet herunter. Denken Sie daran, dass alles Vektorielle in SVG umgewandelt werden kann (z. B. Sie haben vielleicht eine .eps- oder .pdf-Datei, aber sie enthält Vektorobjekte, also öffnen/manipulieren Sie sie in Illustrator, speichern Sie als .svg).
  • Alles auf The Noun Project ist SVG
  • Stockfoto-Websites haben normalerweise eine Möglichkeit, nur Vektorsuchergebnisse zurückzugeben. (z. B. Shutterstock oder Vecteezy)
  • Denken Sie daran, dass Schriftarten Vektoren sind, daher sind Icon-Schriftarten Vektoren, daher kann jedes Icon in einem Icon-Schriftartenset SVG sein. (Schriftart herunterladen und aktivieren, Zeichen in einem Illustrator-Dokument in dieser Schriftart eingeben, in Umrisse konvertieren, als .svg speichern) Hier ist eine große Liste von Icon-Schriftarten von mir.
  • SVGCuts (kostenlose Kategorie)
  • Pinterest Board
  • Foundry: „Bereitstellung einer neuen Generation von Vektor-Assets und unendlichen Möglichkeiten“ von thoughtbot
  • SVG Porn (Logos für beliebte Sachen im SVG-Format)

SVG-Demos

• SVG Fancy Town: eine Sammlung von Pens, die ich gefunden habe, um etwas Cooles oder Interessantes oder beides im SVG-Bereich zu demonstrieren.
• Codrops hat eine gute Menge an schönen SVG-Demos
• SVG Wow
• Erik Dahlströms /svg/
• Dynamisch generiertes SVG durch SASS + Ein 3D-animiertes RGB-Würfel! von Lea Verou
• Patatap – super lustige Demo von Jonathan Brandel, der SVG und Musik mit Ihren Interaktionen animiert.
• Komplexe SMIL-Animation von rafszul von einem laufenden Wolf.
• SVG eignet sich gut für die Idee von „responsiven Logos“. Diese von Joe Harrison sind SVG, aber eher wie ein CSS-Sprite, da es sich um vollständige Grafiken handelt, die ausgetauscht werden. Jeremy Frank hat einen Beitrag über das Stylen/Verbergen/Anzeigen/Bewegen der Teile von SVG basierend auf dem verfügbaren Platz.
• Halbton.svg
  

  Vermissen Sie die Zeiten, in denen man eine Zeitung mit schönen Halbton-Schwarz-Weiß-Drucken öffnete? Erschaffen Sie diese Magie neu (abzüglich der Tintenflecken und des Papiergeruchs) mit vollständig skalierbaren SVGs.

SVG-Filter

Es gibt CSS-Filter, die vertraute Dinge wie Unschärfe ermöglichen. SVG hat seine eigenen Filter (aus denen die CSS-Filter stammen), die diese vertrauten Dinge, aber auch viel mehr umfassen, einschließlich seltsamer und einzigartiger Dinge, die an Photoshop-Filter erinnern. SVG-Filter können sowohl auf HTML-Inhalte als auch auf SVG-Inhalte angewendet werden.

• SVG-Filter (Beispiele und Demo-Tool) von Jorge Aznar
• Praktische Anwendung: SVG-Filtereffekte
• SVG-Filter von Jakob Jenkov
• Browserübergreifende Filter mit CSS und SVG von Peter Gasston
• Anwenden von SVG-Effekten auf HTML-Inhalte auf MDN
• SVG-Filter auf Text von Chris Scott
• Spaß mit SVG-Filtern von Alan Greenblatt
• SVG-Filter auf HTML5-Video von Paul Irish (funktionierende Demo).
• Verbesserung der Datenvisualisierung mit SVG-Filtern von Erik Hazzard
• SVG-Filter von Mike Sierra
• SVG Essentials/Filter
• Sie können gerichtete Unschärfe mit Filtern erzeugen. Hier Lucas Bebber mit mehr dazu und zwei weitere Demos von Ignacio Correia: Mausbewegung und Text-Scroll.
• Eine Schattenkopie mit SVG-Filtern erstellen von Tab Atkins
• Die Kunst des SVG-Filters und warum er großartig ist von Dirk Webber. Viele coole Textfilter sind hier gesammelt.

Daten-URIs und SVG

Einer der Vorteile von Inline-SVG ist die Tatsache, dass keine Webanfrage gestellt werden muss. Die Informationen zum Zeichnen dieses SVG sind direkt vorhanden. Daten-URIs (manchmal „Base 64“-Kodierungen, manchmal tatsächliche <svg>-Syntax (UTF-8)) rendern ebenfalls ohne Anfrage (das ist ja eigentlich der Sinn der Sache).

• Wahrscheinlich nicht SVG in Base64 kodieren – Base64 erhöht die Größe um etwa 33 % und wird möglicherweise nicht so effizient komprimiert. Obwohl Sie es möglicherweise kodieren müssen, damit es unter IE funktioniert, was die Größe ebenfalls erhöht...
• Es gibt verschiedene Optionen für das, was Sie in einem Daten-URI kodieren möchten (und einige Möglichkeiten, es zu vermasseln). Taylor Hunt hat viel dazu geschrieben.
• Checkliste von Amelia Bellamy-Royds, was für einen UTF-8-Daten-URI in CSS erforderlich ist.
• In-Browser Base64-Encoder
• Grunticon gibt als ASCII kodiertes SVG in CSS aus. D.h. data:image/svg+xml;charset=US-ASCII,
• CLI-Befehle zum Abrufen von Base64-Versionen von Dateien (entweder in eine Datei oder in die Zwischenablage geschrieben).
• Compass (für Sass) hat Data-URI-Helfer.
• SVG-Hintergrundfarbe in CSS setzen (URL-kodiert in Sass) von Philipp Kühn

SVG und CSS

CSS kann Inline-SVG auf die meisten erwarteten Arten beeinflussen. Aber SVG hat auch seine eigenen CSS-Eigenschaften, die nur für es gelten.

• Eigenschaftenliste (möglicherweise leicht veraltet, da sie sich auf Presto bezieht)
• SVG-Styling-Eigenschaften auf W3.org
• SVG-Styling von Dirk Schulze
• SVG und CSS auf MDN
• SVG-Icons mit einfachem CSS manipulieren von P.J. Onori
• Wenn Sie Inline-SVG verwenden und, können Sie Elemente innerhalb desaus CSS ansprechen, aber sie sind sich nicht bewusst von ihrem <svg>-Elternelement, daher können Sie keine unterschiedlichen Klassennamen darauf haben, die bestimmte Elemente im Inneren beeinflussen. Sie können Eigenschaften wie fill nach unten kaskadieren lassen, und es gibt einen Trick, um 2 Farben zu erhalten.
• Sie können Transformationen direkt auf SVG-Elemente anwenden, wie z. B. transform="translate(2px, 3px)", aber Charlie Marsh entdeckte, dass Sie damit keine so gute Leistung erzielen wie mit CSS-Transformationen auf einem übergeordneten HTML-Element, wie z. B. style="transform:translate(2px, 3px)".

SVG und Beleuchtung

• Ein Blick auf SVG-Lichtquellenfilter von Joni Trythall
• Glanz hinzufügen – Filter für Beleuchtung verwenden
• feDiffuseLighting auf MDN

SVG optimieren

Es ist sehr sinnvoll, Bilder vor der Verwendung im Web zu optimieren. Für Rasterbilder können Werkzeuge wie ImageOptim auch nach dem Speichern mit der kleinsten, niedrigsten Qualität, mit der Sie zufrieden sind, weitere Dateigröße einsparen, ohne die Qualität weiter zu beeinträchtigen.

Das Gleiche gilt für SVG!

• SVGs für die Webnutzung optimieren ist ein guter Beitrag, der uns durch einige einfache Schritte führt, um die SVG-Datei selbst aufzuräumen.
• SVGO ist ein Kommandozeilen-Tool (Tutorial), das SVG optimiert. Und es hat eine Grunt-Aufgabe oder eine native App. SVG NOW ist ein Illustrator-Plugin, das es verwendet, um SVGO-optimierte SVGs direkt aus Illustrator zu exportieren.
• Kyle Foster hat viele Informationen zur SVG-Optimierung, einschließlich zweier Videos ( eines, zwei) und einer Folienpräsentation.
• SVG-Optimierung: Die Grundlagen von Dudley Storey
• Todd Parker erinnert uns daran, dass SVG gut zippt. Wiederholende Informationen sind das, womit GZip gerne arbeitet, also machen Sie sich keine zu großen Sorgen darüber.
• Scour – ein SVG-Bereiniger
• Peter Collingridge hat SVG Optimizer erstellt. Er stellt eine Upload-und-Ausgabe-Version oder eine Schritt-für-Schritt-Version im Browser bereit.
• SVG für das Web mit Adobe Illustrator CC exportieren von Michaël Chaize
• Optimierung von Inkscape SVG-Größe für das Web von Tavmjong Bah
• SVG Cleaner (Einführung Blogbeitrag, Video und Repo)

SVG-Software

Desktop-Software

• Adobe Illustrator (19,99 $/Monat, Mac / Windows). Während Illustrator das Flaggschiff-Vektor-Bearbeitungsprogramm ist, können Sie auch SVG aus Photoshop exportieren.
• Sketch ($99)
• Affinity Designer (49,99 $, Mac)
• WebCode (39,99 $, Mac)
• Animatron (Kostenlos, Mac)
• Inkscape (Kostenlos, Mac / Windows / Linux)

In-Browser-Software

• SVG-edit
• Method Draw
• Mondrian

Mobile apps

• iDraw (24,99 $, Mac und iOS)
• Inkpad (Kostenlos, iOS)
• Concepts: Smarter Sketching (5,99 $ für SVG-Export, iOS)

SVG-Stuff in Code-Editoren

• Eine Reihe von Tab-Complete-Snippets für Sublime Text 2/3. Auch SMIL.
• Spaß mit SVG und Vim von Adam Morse
• Brackets SVG Code Hints

SVG-Sicherheit

• Das Bild, das mich aufrief (Active Content Injection mit SVG-Dateien), eine Präsentation-PDF von Mario Heiderich.
• Crouching Tiger – Hidden Payload: Sicherheitsrisiken von Scalable Vector Graphics

Barrierefreies SVG

Ich bin kein Experte für Barrierefreiheit, aber soweit ich das beurteilen kann, wird SVG von der Barrierefreiheits-Community gut angenommen. Natürlich muss man es immer richtig machen.

• Tipps für die Erstellung barrierefreier SVG von Léonie Watson
• Verwendung von ARIA zur Verbesserung der SVG-Barrierefreiheit von Léonie Watson
• 15 Richtlinien für SVG-Barrierefreiheit
• Aktueller Stand der Erstellung barrierefreier SVG von Douglas Alan Schepers
• Describler von Douglas Alan Schepers ist ein browserbasiertes Tool, das Ihnen hilft, Ihre SVGs in barrierefreiere SVGs umzuwandeln. Es kümmert sich darum, dass sie automatisch skalieren, ermöglicht Ihnen die Vorschau, wie sie vorgelesen werden, hilft beim Hinzufügen von Barrierefreiheitsattributen usw.
• (Video) Douglas Schepers über Barrierefreie SVG-Datenvisualisierung
• VoiceOver auf iOS benötigt role="img"

SVG und Responsive Design

Hier gibt es einige große Überschneidungen. Erstens passt die inhärente Flexibilität, Schärfe und geringe Dateigröße von SVG philosophisch gut zum Cross-Device-Denken des Responsive Designs. Zweitens, da SVG eigene Viewports haben, sind CSS-Media-Queries darin eine Art mythische "Element-Queries", da sie auf sich selbst basieren.

• Media Queries in SVG von Tim Kadlec
• Diese Demo von Joe Harrison fesselte die Fantasie der Leute mit den Möglichkeiten responsiver Icons. Je mehr Platz zur Verfügung steht, desto mehr Details werden im Haus gezeigt.
• Ilya Pukhalski hat sich diese Demo angesehen und sie detaillierter erklärt und andere Methoden betrachtet.
• Sara Soueidan hat auch einen Überblick über die Techniken gegeben.
• Dudley Storey hat die richtigen Eigenschaften untersucht, die benötigt werden, um sicherzustellen, dass SVG (verschiedener Typen) flexibel bleiben.
• Responsiver SVG-Grafen von Andrew Weeks.
• Wichtig zu wissen über CSS in SVG: Der Viewport innerhalb von SVG ist die Größe des SVG-Elements selbst, nicht des gesamten Dokuments im Browser. Wenn Sie also @media-Queries schreiben, basieren Dinge wie min/max-width auf der Breite dieses SVG. Estelle Weyl nutzte diese Fähigkeit, um eine Technik für responsive Bilder zu entwickeln, die sie The Clown Car technique nannte.
• Jason Grigsby war ebenfalls fasziniert von Media Queries in SVG und verlinkte einige weitere Ressourcen und Demos dazu.
• Demo von Bear Travis, bei der eine vollständige SVG-Grafik (mit Parallaxe!) auf einem kleineren Bildschirm zu einer abgeschnittenen kreisförmigen Grafik geändert wird.
• SVG als Objekt einbetten und per CSS steuern von Sara Soueidan

SVG und JavaScript

Einer der Vorteile von SVG ist, dass die Formen im DOM vorhanden sind. Zum Beispiel könnte ein <svg> ein <rect> und einen <circle> haben. Über JavaScript könnten Sie einen Event-Handler an nur das <rect> und einen anderen an nur den <circle> binden.

• SVG, JavaScript und das DOM von Ian Elliot
• JavaScript zur Steuerung eines SVG von Peter Collingridge
• Links mit Inline-SVG, Zielgenauigkeit bei Events von mir. (Die Verwendung von pointer-events: none; ist in der Regel eine gute Idee.)
• Lieben Sie es, SVG mit JavaScript zu generieren? Verlagern Sie es auf den Server! von Ilya Zayats
• Beachten Sie, dass Sie beim Manipulieren von SVG mit jQuery möglicherweise nicht etwas wie .addClass() verwenden können, sondern stattdessen .attr("class", foo) verwenden müssen.

SVG und Rastergrafiken

• Sie können Rastergrafiken (JPG, GIF, PNG) mit dem <image>-Element in SVG einbetten.
• Sie können Rastergrafiken mit den Live Trace / Image Trace-Tools in Adobe Illustrator in SVG konvertieren. Oder es gibt ein kostenloses Online-Tool namens Vector Magic.
• Adobe Shape ist eine iOS-App, die Vektorgrafiken direkt von der Kamera eines iOS-Mobilgeräts aufnimmt.
• Wie konvertiert man ein vorhandenes PNG oder GIF in SVG von Ryan Irelan.
• Tools zur Umwandlung von Raster in SVG umfassen PicSVG, Vector Magic und ConvertIO

SVG und CMSs

• WordPress: Medien-Uploader reparieren, damit er SVG akzeptiert.
• WordPress: SVG-Sprite verwalten über den Medien-Uploader (möglicherweise aktuellere Fork?)
• WordPress: ubik-svg-icons

SVG Browser-Support

SVG wird in allen aktuellen Versionen aller Browser und einigen älteren Versionen unterstützt. Die größte Sorge sind generell IE 8 und älter, sowie Android 2.3 und älter. Aber das ist nur grundlegende SVG-Unterstützung (inline, <img>, CSS-Hintergrund). Es gibt Unterfunktionen von SVG, die unterschiedliche Browserunterstützungsstufen haben. Can I Use… tut einen guten Job, diese Dinge zu verfolgen.

• Grundlegende SVG-Unterstützung
• SVG-Filter
• SVG-Effekte auf HTML (z.B. einen SVG-Filter auf ein <div> anwenden)
• SVG-Schriften
• SVG-Fragment-Identifikatoren

SVG-Fallbacklösungen

Wenn Sie Browser unterstützen müssen, die alt genug sind, um SVG nicht zu unterstützen (siehe Abschnitt Browser-Support), gibt es viele Möglichkeiten, Fallback-Lösungen für funktionierende Ressourcen zu implementieren (z.B. image.svg durch image.png oder Ähnliches ersetzen).

• Ein vollständiger Leitfaden zu SVG-Fallbacklösungen von Amelia Bellamy-Royds und mir. Und hier ist der ältere Leitfaden, der hauptsächlich eine Reaktion auf eine einzelne, nicht so gute
• Testen auf Unterstützung von SVG als Bild von mir
• SVG for Everybody von Jon Neal. Syntax: <svg><use xlink:href="spritemap.svg#icon"></use></svg>. Funktioniert entweder sofort oder wird per Ajax ersetzt(für IE) oder es wird ein Fallback-PNG eingesetzt.
• SVG Injector von den Iconic-Leuten (ein sehr schönes Icon-Set als Inline-SVG und jede Art von Fallback). Syntax: <img data-src="svg/thumb-up.svg" data-fallback="png/thumb-up-green.png">. Injiziert Inline-SVG oder ein Fallback.
• Iconic hat auch ihren Illustrator-Exporter und ihr Grunt-Toolkit Open Source gemacht.
• Eine Einführung in Front-End SVG-Hacking von David Bushell
• SVGEezy von Ben Howdle und Jack Smith. Verwenden Sie .svg im HTML, und es wird durch .png ersetzt, wenn es nicht unterstützt wird. Denken Sie daran, dass Sie den Prefetcher nicht übertreffen können, wenn Sie src verwenden, daher unterliegt dies doppelten Anfragen.
• Umgang mit SVG-Bildern in mobilen Browsern von Krister Kari
• Verwendung von SVG unter Android 2.x von Todd Anglin
• Erneuter Blick auf den SVG-Workflow für Leistung und progressive Entwicklung mit transparenten Data-URIs von Todd Motto
• Todd Motto beschreibt auch eine gute Möglichkeit, die Unterstützung für Inline-SVG zu testen, bei der er createElementNS verwendet, um ein SVG-Element zu erstellen, ein Rechteck anzuwenden und zu sehen, ob es funktioniert.
• Wenn Sie so autorisieren möchten, als ob Sie nur SVG-Dateien verknüpfen würden (wie SVG-als-Bild), aber tatsächlich Inline-SVG einfügen, und Sie Angular.js verwenden: schauen Sie sich das an. Sie könnten dies möglicherweise mit einem Unterstützungstest kombinieren, um dann in einem Szenario ohne Unterstützung einen Fallback zu verwenden.
• Eine Technik von Artur A für Inline-SVG-Fallbacks. Sie ist etwas kompliziert und umfasst <switch>, <foreignObject> und ein Zusammenspiel zwischen CSS auf der Seite und CSS im Inline-SVG, aber sie scheint zu funktionieren. Die Idee ist, <img src> nicht zu verwenden, also keine doppelten Downloads, und auch keine Hintergrundbilder herunterzuladen, wenn sie nicht benötigt werden.
• SVG Magic – jQuery-Plugin, das PNG-Fallbacks bietet. Das wirklich Coole an SVG Magic ist, dass es die PNG-Bilder für Sie erstellt, anstatt dass Sie Ihre eigenen erstellen müssen. Einfacher, aber Vorsicht, es verursacht eine externe Netzwerkanfrage, um dies zu tun.
• svg-fallback von yoskel. (Grunt-Aufgabe)
• Drag-and-Drop SVG zu PNG Konvertierung unter OS X.
• ALT: svgweb bot SVG-Fallbacklösungen mit Flash an.

SVG-Spezifikationen

Das W3C beaufsichtigt die Syntax, die die Implementierung von SVG in Browsern leitet. Es gibt technisch eine ganze SVG Working Group. SVG 1.1 ist final, SVG 2 ist im Entwurf. (Eine kleine Geschichte von Amelia Bellamy-Royds: Eine kleine Geschichte).

• SVG 1.1 (Empfehlungsstatus)
• SVG Tiny 1.2 (Wird meines Wissens nicht wirklich verwendet, auch wenn man es aus Illustrator exportieren kann. Es war für Dinge wie alte Blackberrys gedacht)
  

  SVG 1.2 Tiny ist ein Profil von SVG, das für die Implementierung auf einer Reihe von Geräten bestimmt ist, von Mobiltelefonen und PDAs bis hin zu Laptops und Desktop-Computern, und enthält daher eine Teilmenge der Funktionen, die in SVG 1.1 Full enthalten sind.

• SVG 2 (Status des Herausgeberentwurfs, auch hier) wird anscheinend Dinge wie Strichpositionierung (innen, außen, mitte) haben.
  

  Diese Version von SVG baut auf SVG 1.1 Second Edition auf, indem sie die Benutzerfreundlichkeit der Sprache verbessert und neue Funktionen hinzufügt, die von Autoren häufig angefordert werden.

  Wo wir gerade von SVG 2 sprechen, hier diskutiert Tavmjong Bah einige neue Funktionen. Ich habe gehört, z-index kommt auch in SVG 2, aber im Moment muss man die Quellreihenfolge ändern, um das zu replizieren.

• Es gibt auch spezielle Spezifikationen für Marker und Striche.

SVG-Vorträge

Es gibt viel zu besprechen! Besonders jetzt, da die Browserunterstützung für SVG heutzutage so allgegenwärtig ist.

Folien

• SVG: So sehr gut von Tyler Sticka
• Sie sollten SVG verwenden von Ben Visser (mit Demos)
• Pixel hinter sich lassen von Todd Parker auf der Artifact Conf
• SVG mit CSS und SMIL animieren von Sara Soueidan
• Skalierbare Vektorgrafiken mit CSS gestalten und animieren von Sara Soueidan. Auch ein Artikel auf Smashing Magazine.
• SVG-Optimierung – Die ultimative Edition von Kyle Foster
• SVG von James Coleman
• SVG für das Responsive Web von Jan van Hellemond
• Next Level SVG von Ilya Pukhalski
• Mike Bostock über D3.js
• SVG schlägt zurück von Matt Baxter
• Cirque du Filter: Eine Reise in fortgeschrittene SVG-Filtereffekte von Michael Mullany
• SVG – Weniger Pixel, mehr Spaß! von Sven Wolfermann
• Responsives SVG von Alex Walker
• Filtereffekte
• Die Zukunft von SVG und Webstandards von Tavmjong Bah
• Die Zukunft von Farbverläufen in SVG? von Nikos Andronikos
• Die Macht von SVG und dem offenen Web von Doug Schepers (Folien in SVG =))
• Eine Sammlung von Vorträgen vom CSS Dev Conf 2015

Vorträge als Videos

• SVG ist für alle von mir
• Skalierbare Vektorgrafiken mit CSS gestalten und animieren von Sara Soueidan auf der CSSConf
• Sie kennen SVG nicht von Dmitry Baranovskiy (mit Folien)
• Einführung in SVG und RaphaelJS von Marc Grabanski
• Grundlagen interaktiver Vektorgrafiken und Schnelldurchlauf durch skalierbare Vektorgrafiken von Marc Grabanski
• SVG zu Ihrem Werkzeugkasten hinzufügen von Lennart Schoors
• SVG für responsives HTML5 von Jan van Hellemond
• Erstellen einer SVG-Ladeanimation mit Adobe Illustrator
• SVG-Linienanimations-Tutorial mit CSS & anderem Spaß
• Einige Snap.svg-Beispiele von Murphy Randle
• SVG von Cara Heacock
• Modernes Webgrafikdesign mit SVG von Priyanka Herur
• Überraschung und Freude: CSS + SVG von Chris Wright
• Panel W3C Standards und Implementierer (2014)
• SVG mit CSS manipulieren von Kyle Foster
• Animationen und Interaktivität in SVG erweitern von Devina Coutinho

Podcasts

• Doug Schepers über The Web Ahead mit Jen Simmons
• ShopTalk 129: Mit Sara Soueidan

SVG-Bücher

• Practical SVG von Chris Coyier – 2016
• SVG Pocket Guide von Joni Trythall – 2014
• Learn SVG Interactively von Jay Nick – 2010
• Interactive Data Visualization for the Web von Scott Muray – 2013
• SVG Essentials von J. David Eisenberg und Amelia Bellamy-Royds (Ursprünglich 2002 veröffentlicht, 2. Auflage 2014)
• RaphaelJS: Graphics and Visualization on the Web von Chris Wilson – 2013
• Building Web Applications with SVG von Jon Frost – 2012
• Sams Teach Yourself SVG in 24 Hours von Micah Laaker
• Learning Raphaël JS Vector Graphics von Damian Dawber – 2013
• SVG Tessellation von Jeremy Corbett – 2013
• SVG Compressed von Jakob Jenkov – 2013

SVG-Bugs

Hoffentlich ist inzwischen klar, dass SVG ein riesiges Universum für sich ist. Es gibt so viele Funktionen, und Funktionen kombiniert mit anderen Funktionen und anderen Technologien, es ist kein Wunder, dass es Bugs und Browser-Inkonsistenzen gibt.

• SVG Weirdness: "Ein Repository zur Dokumentation von Fehlern und anderem seltsamen SVG-Verhalten" von Emil Björklund
• svg-edit erfasst einige Browser-Bugs in seinem Wiki.
• Sie können die WebKit-Bug-Datenbank nach SVG-bezogenen Fehlern durchsuchen.
• Das Gleiche gilt für Mozillas Bug-Datenbank.
• Und Chromium.
• Vectomatic erfasst einige Fehler.

Sonstiges

Obligatorische Zufälligkeiten!

• Ihre .svg-Dateien werden nicht angezeigt, obwohl Sie sie korrekt verlinkt haben? Ihr Server sendet möglicherweise den falschen Content-Type (text/xml anstelle von image/svg+xml). Mit .htaccess beheben.
• Sie können ein .svg verwenden, um den Cursor zu ersetzen. SVG-Cursor von Robert Longson
• SVG wäre ideal für Favicons, aber nur Firefox unterstützt dies im Moment (Okt. 2014). Safaris "Pinned Tabs" akzeptieren (benötigen?) SVG.
• SVG-Platzhalterbildgenerator von Doug Schepers
• Wenn Sie jemals ein leeres GIF als Füllbild verwendet haben (oder eine Data-URI davon), hier erklärt Stephen Shaw, wie man stattdessen SVG verwendet, was die Aufrechterhaltung eines konfigurierbaren Seitenverhältnisses erleichtert.
• GitHub unterstützt das Vergleichen von SVGs, sowohl als Code als auch visuell.
• Trianglify: eine JavaScript-Bibliothek zur Erzeugung farbiger Dreiecksnetze, die als SVG-Bilder verwendet werden können.
• Grundlagen von SVG in E-Mails
• Poly Maker – großartige Erklärung zur Erstellung von Poly-Kunst in SVG von Paul Lewis. Und wo wir gerade von Poly sprechen, Matthew Wagerfields Flat Surface Shader kann auch in SVG ausgeben.
• IJSVG ist eine COCOA-Bibliothek für Mac OSX 10.7+, die SVGs in Ihren COCOA-Anwendungen rendert.
• SVG-Icons mit React erstellen von Brent Jackson.
• Warum wird SVG wirklich GROSS? von David Dailey
• Flash-Designer? Flash2Svg: "Exportieren Sie animierte SVG-Dateien direkt aus Flash Pro"

SVG 2

• SVG 2 Spec
• Neue Funktionen von SVG 2