Anzeige
Der Agentur-Server: Das digitale Zuhause für deine Projekte.
↬ Jetzt testen ↬ Jetzt testen!
  • Apps
Tara Hornor 21. März 2019

SVG für alle: Icons, Tools und andere Ressourcen

Im Rahmen des Siegeszugs mobiler Geräte entwickelt sich kontinuierlich neue Technologie für die schönere Gestaltung von Webseiten und Apps. Eine dieser fantastischen mobilen Technologien 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.

Eine weitere tolle Eigenschaft von SVG-Grafiken 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 du Neuling in der SVG-Welt bist oder von Anfang an dabei warst, es schadet nie, nützliche Webseiten in deine Liste zu übernehmen. Nachfolgend sind einige exzellente SVG Icons, Werkzeuge und Ressourcen dargestellt, welche allesamt frei erhältlich sind. Was es dabei zu beachten gilt, ist 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. Um ein bestimmtes Icon schnell zu laden, nutze die Suchleiste oder suche basierend auf der Kategorie, so beispielsweise unter Networking, Zeichen, Tiere etc. Alle dieser SVG Icons haben eine Creative Commons Lizenz. Verweise daher auf die Quelle, wenn du diese Icons nutzt.

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.

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 deinen 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.

Icons Sets

Da hat sich jemand viel Mühe gegeben mit diesen auf Dribbble erhältlichen SVG-Icons. Es empfiehlt sich die Lizenzen zu prüfen, 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.

SVG: So erstellst du interaktive Grafiken für deine Website

Dass das SVG-Format weit mehr ist als ein vektorbasiertes Grafikformat, dürfte inzwischen bekannt sein. Animationen und Interaktionen gehören ebenfalls zum Repertoire des Vektorformats. Da auch JavaScript innerhalb einer SVG-Datei eingesetzt werden kann, ergeben sich zahlreiche Anwendungsmöglichkeiten. Die JavaScript-Lösung svidget.js stellt hierfür ein umfangreiches Framework zur Verfügung, welches das Erstellen und Einbinden von SVG-Grafiken in Form von Widgets ermöglicht.

SVG & CSS: Was geht, was nicht in der Gestaltung per Stylesheet

Bildquelle: Depositphotos

SVG hat sich als Format für Vektorgrafiken im Browser etabliert. Grafikprogramme wie Adobes Illustrator unterstützen das Speichern in diesem Format und moderne Browser können sie problemlos darstellen. Da SVG-Grafiken wie auch HTML-Dokumente über eine Auszeichnungssprache erstellt werden, ist die Erstellung und Bearbeitung per Texteditor möglich. Für die Gestaltung von SVG-Grafiken kann man zudem auf Stylesheets zurückgreifen. Was den Einsatz von CSS betrifft, gibt es neben vielen Gemeinsamkeiten zu HTML jedoch auch einige Unterschiede zu beachten.

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.

Noch mehr herausragende SVG-Tools und dutzende Icon-Sets

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

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

(Der Beitrag erschien erstmals im Mai 2016 und wird seitdem regelmäßig aktualisiert. Das letzte Update stammt vom 21. März 2019.)

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...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.