• Apps

Best of SVG: Icons, Tools und andere Ressourcen

Tara Hornor

Tara Hornor schreibt vornehmlich über Marketing, Werbung und Markengestaltung, aber auch über...

Im Rahmen des Siegeszugs von mobilen Geräten in der gesamten Welt entsteht und entwickelt sich kontinuierlich neue Technologie für die schönere Gestaltung von Webseiten und Apps für eben diese Geräte. Eine dieser fantastischen mobilen Technologien, welche sich in den letzten Jahren etabliert haben, ist SVG, die Scalable Vector Graphics. SVG erweitert das Konzept von Vektoren über das Niveau von bloßen skalierbaren Bildern hinaus. Tatsächlich ist ein SVG eigentlich XML-basiert, was heißt, dass ein SVG und seine Verhaltensweisen in Sachen Interaktion und Animation mittels CSS und/oder Javascript definierbar sind.

bestofsvg-teaser_DE

Eine weitere tolle Eigenschaft von SVG-Icons ist der Fakt, dass diese stets Quelldateien sind, wodurch es viel einfacher ist, sie zu bearbeiten. Darüber hinaus sieht SVG auf Retina-Displays brillant aus, was für helle Begeisterung bei Entwicklern und Designern für mobile Geräte gesorgt hat.

Aber ob Sie Neuling in der SVG-Welt sind oder von Anfang an dabei waren, es schadet nie, nützliche Webseiten in ihre Liste zu übernehmen. Nachfolgend sind einige exzellente SVG Icons, Werkzeuge und Ressourcen dargestellt, welche allesamt auf verschiedene Art frei erhältlich sind. Auf welche Art, ist dabei gleich mit angegeben.

SVG-Icons und Pakete

Flat Icon

Die Webseite von Flat Icon umfasst über 60.000 freie Vektor-Icons, welche als SVG-, EPS-, PSD- oder PNG-Format downloadbar sind. Verwenden Sie das frei erhältliche Adobe-Extension-Plugin, um Icons direct in Photoshop, Illustrator oder AfterEffects zu laden. Um ein bestimmtes Icon schnell zu laden, können Sie die Suchleiste nutzen oder basierend auf der Kategorie suchen, so beispielsweise unter Networking, Zeichen, Tiere etc. Alle dieser SVG Icons haben eine Creative Commons Lizenz. Verweisen Sie daher auf die Quelle, wenn Sie eines dieser Icons nutzen.

iconmonstr

Diese einfachen, aber großartig aussehenden Icons sind sowohl für den kommerziellen als auch den privaten Gebrauch völlig kostenfrei. Sie benötigen keinen Quellenverweis und können darüber hinaus beliebig modifiziert werden. Die Seite von iconmonstr beinhaltet eine ziemlich große Sammlung und ist definitiv ein Lesezeichen wert.

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

E-Book Bundle von Andreas Hecht

iconmelon

Dies ist eine exzellente Webseite, um fantastische SVG-Icons für ihre Webdesigns und Designs für mobile Geräte zu finden. Sie können, wenn gewünscht, vor dem Download Filter hinzufügen – wie beispielsweise Schatten, Unschärfen und Aufprägungen. Sogar einfache Anleitungen für das Hinzufügen von Code und das Verwenden von CSS für die Gestaltung sind enthalten.

Free Icons

Die kostenlosen Icons von Free Pik können als SVG und im PNG- und EPS-Format runter geladen werden. Sie sind allesamt kostenfrei für den privaten und den kommerziellen Gebrauch mit Quellenverweisen nach CC 3.0.

Social Icons von Adam Fairhead

Dieses Set von SVG Icons für die sozialen Netzwerke sieht gut aus und ist leicht in ihren Code einfügbar. Einfache Anleitungen sind ebenfalls auf der Seite enthalten, und das downloadbare Code-Paket beinhaltet eine Beispielseite.

Open Iconic

Die freie Open Source Version von Iconic umfasst 223 Icons in SVG-, Webfont- und Rasterformat. Besonders geeignet sind sie zur Verwendung mit Bootstrap und Foundation.

RoundIcons.com

Die Icons von RoundIcons.com sind lizenzfrei bei einem imit von 200 Stück pro Projekt. Wer mehr benötigt oder eine kommerzielle Lizenz erfordert, muss mindestens 99 Dollar dafür ausgeben.

customizr.NET Icons

Die PIktogramme von cutomizr.net sind online konfigurierbar vor dem Download. Das ist für weniger befähigte Verwender natürlich ideal. Alle Änderungen werden in einer Preview gezeigt. Die Zahl der kostenfreien Icons ist begrenzt, eine Pro-Version schlägt mit 7 Dollar pro Monat zu Buche.

Icons Sets

Da hat sich jemand viel Mühe gegeben mit diesen auf Dribbble erhältlichen SVG-Icons. Es empfiehlt sich die Lizenzen gegen zu checken, bevor man zur Verwendung schreitet.

SVG-Icon Tutorials, Tools und mehr

SVG Icons FTW

In diesem Artikel geht es um SVG in der Tiefe. Was ist möglich? Wie setzt man sie ein? Wie lassen sie sich bearbeiten? Wie fügt man interaktive Elemente hinzu? Das Wissen wird dabei schrittweise vermittelt. Alles in allem handelt es sich um einen guten Einstieg in die Materie..

Animated SVG Icons with Snap.svg

In dieser Anleitung geht es um die Verwendung der Bibliothek Snap.svg, mit der man Icons animieren kann. Sie enthält eine Demo, die man im Quellcode runterladen kann.

Icon System with SVG Sprites

Den CS-Experten Chris Coyier kann man bekanntlich immer empfehlen. So ist das auch hier, wenn er sich mit Inline SVG und der Verwendung des <use>-Elements beschäftigt. Dabei ist der Beitrag sowohl für Anfänger, wie auch fortgeschrittene Anwender zu gebrauchen.

IcoMoon

IcoMoon haben wir in diesem Beitrag ausführlicher vorgestellt.

Fontastic.me

Auch Fontastic kennen Dr. Web LeserInnen bereits.

SVG Morpheus

SVG Morpheus erlaubt das Morphen von einem Icon zum anderen mit JavaScript. Dabei ist die Bewegung umfassend zu konfigurieren. Wie üblich bei derlei Projekten, kann SVG Morpheus vollkommen frei verwendet werden.

iconizr

Mit Iconizr macht man seine SVGs (oder PNGs) zu Icon-Sets, die ,mit Sass und/oder CSS zu Paketen geschnürt, zum schnellen Einsatz vorbereitet werden.

Animate SVG Icons with CSS and Snap

Auch in diesem Tutorial geht es um Snap.SVG und CSS zur interaktiven Gestaltung von Icons. Zudem gibt es Tipps zur Erstellung von Piktogrammen mit Illustrator. Eine ganze Reihe nützlicher weiterer Ressourcen sind verlinkt.

WordPress SVG Icons Plugin

Vielen Dank an Evan Herman für dieses sehr hilfreiche Plugin für WordPress-Nutzer. Damit kann man eigene SVG-Packs importieren und nutzen; einige werden auch mitgeliefert. Das Plugin ist kostenfrei verwendbar, Herman freut sich aber über eine Spende zur Unterstützung der weiteren Entwicklung.

Haben wir ausgerechnet Ihre Favoriten vergessen? Dann würden wir uns freuen, wenn Sie sie in den Kommentaren ergänzen.

(dpe)

Tara Hornor

Tara Hornor schreibt vornehmlich über Marketing, Werbung und Markengestaltung, aber auch über Web- und Grafikdesign, sowie Fotografie. Gemeinsam mit ihrem Ehemann betreibt sie die Creative Content Experts, eine kreative Textagentur in den Vereinigten Staaten. Folgen Sie @TaraHornor auf Twitter, wo sie einen steten Fluss an Informationen von sich gibt...

Sortiert nach:   neueste | älteste | beste Bewertung
trackback

[…]  1Best of SVG: Icons, Tools und andere Ressourcen | DR. WEB  […]

trackback

[…] sind zunächst einmal klassische SVG-Dateien, die dank des Frameworks von svidget.js um zusätzliche Elemente erweitert werden, mit denen sich […]

wpDiscuz