40 herausragende SVG-Tools und dutzende Icon-Sets

Dirk Metzmacher

Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen...

Einerseits wird das Netz immer visueller und selbst kürzeste Textpassagen werden mit einem Bild unterstrichen. Andererseits müssen wir stark auf die Ladezeiten achten, um weder Besucher noch Google zu vergrämen. Mit der Entwicklung des Responsive Web ist eine dritte Komponente hinzu gekommen: die Fähigkeit einer Grafik, mit den verschiedensten Auflösungen klar zu kommen.

SVG-Bildmaterial, also Scalable Vector Graphics, ist die Lösung. Kleine Dateigrößen und eine flexible Anpassung an die Größe des Screens sind hier gegeben. Wir haben die schönsten Online-Tools und Icon-Sets gesammelt.

SVG-Web-Tools

Method Draw

Method Draw ist eine einfache Web-App zur kostenlosen Bearbeitung von SVG-Dateien. Speziell als Online-Vektor-Editor konzipiert, ist die Bedienung sehr einfach: Datei öffnen, bearbeiten und wieder speichern: Fertig!

SVG
© Method Draw

Snap.svg

Mit Snap.svg können SVG-Dateien kostenlos erstellt und bearbeitet werden, bis hin zu sehenswerten Animationen.

SVG
© Snap.svg

SVG Morpheus

Wer etwas mehr Bewegung in seinen Icons sehen möchte nutzt SVG Morpheus, um zwei oder mehr Icons von dem einen in das andere übergehen zu lassen.

SVG
© SVG Morpheus

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

quasi-svg

Nutze diese App, um schöne kristalline Muster zu kreieren. Über zahlreiche Eingabefelder kannst du benutzerdefinierte Muster erstellen und damit Hintergründe für deine Projekte.

SVG
© berjon.com

Plain Pattern

Die Plain Pattern App ist eine einfach zu bedienende Anwendung für die Erstellung von Mustern, die im SVG-Format exportiert werden können.

SVG
© kennethcachia.com

Chartist.js

Chartist hilft Designern und Entwicklern dabei, Inhalte visuell in interaktive und dynamische Diagramme umzuwandeln, die auf jedem Endgerät gleich aussehen.

SVG
© gionkunz.github.io

bonsai

Bonsai bietet eine Bibliothek zur Grafikbearbeitung an, die dazu eine API- und Renderplattform für SVG unterstützt.

SVG
© bonsaijs.org

SVGMagic

Ist der Browser zu alt um SVG anzuzeigen, so hilft SVGMagic aus. Blockierte SVG-Inhalte werden zu PNGs konvertiert, damit der Browser sie darstellen kann. Hier kommt jQuery im Hintergrund zum Einsatz.

SVG
© SVGMagic

Glyphter

Glyphter gibt dir einfachen Zugriff auf 16 verschiedene Quellen SVG-optimierter Icons und Schriften.

SVG
© Glyphter

iconizr

Hast du eine ganze Reihe von SVG-Animationen oder -Grafiken, dann setze sie alle zusammen: Iconizr konvertiert sie in ein anwendbares CSS Icon Kit.

SVG
© iconizr

SVG-Icon-Sets

Free SVG icons for popular brands

SVG
© simpleicons.org

Responsive E-Commerce Icon Set

SVG
© plugandplaydesign.co.uk

Freebies – Social flat icons set

SVG
© Christophe Kerebel

Simple Line Icons – Freebie

SVG
© Nimasha Perera

Web Hosting & Technical Support Icons

SVG
© Vecteezy

Free Fruit Icons

SVG
© James George

UI UX Icons

SVG
© Armantas Zvirgzdas

Free vector Foldicons

SVG
© James George

60 Free Industrial Icons

SVG
© speckyboy.com

Rounded Icon Set

SVG
© Jerry Low for Myplanet

The Free Bitcoin Icon Set

SVG
© speckyboy.com

Freebie: Pixelvicon Icon Set (80 Icons)

SVG
© Mohammad Amiri

Free vector icons

SVG
© Dan Skrobak

60 Stylish Round Icons – Meet The Roundicons

SVG
© smashingmagazine.com

Stroke Gap Icons – Webfont

SVG
© graphicburger.com

60 Astonishing Flat Icons For Free

SVG
© smashingmagazine.com

Basic

SVG
© linea

36 Beautiful Rounded Icons

SVG
© smashingmagazine.com

240 Free Kitchen / Restaurant Icons

SVG
© ewebdesign.com

200 Free Valentine’s Day Icon Pack

SVG
© ewebdesign.com

50 File Type Vector Icons

SVG
© Chris B

Free Download: 40 Valentine’s Icons

SVG
© webdesignerdepot.com

CaptainIconWeb

SVG
© mariodelvalle

150 outlined icons – PSD AI SVG Webfont

SVG
© Dario Ferrando

nastyicons.com

SVG
© nastyicons.com

Metrize Icons

SVG
© alessioatzeni.com

Simple Line Icons – 100+ free icons

SVG
© Mirko Monti

200 Holidays & Travel Icons Pack

SVG
© graphicsfuel.com

100 Free Line-Style Icons

SVG
© elegantthemes.com

Weather icons set Free Vector

SVG
© freepik.com

Dirk Metzmacher

Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen Tutorials seit über 12 Jahren Leser von Fachpublikationen wie Galileo Press, DigitalPhoto, Dr.Web, Print24, PSD-Tutorials oder Noupe von den Grundlagen zum Thema Photoshop bis hin zu professionellen Arbeitsweisen begleitet haben. Sein Twitter-Account und seine Facebookseite.