Schlagwort: svg

Captain Icon: Kostenloses Set mit 350+ Flat Icons in vielen Formaten

Mario Del Valle aus Valladolid im sonnigen Spanien ist ein waschechter Kreativer aus ganzem Herzen. Nach eigener Aussage war er schon als kleiner Junge ein begeisterter Zeichner. In jüngerer Zeit kam noch der Wunsch dazu, seine Werke mit anderen zu teilen. Also setzte er sich an sein Tablett und begann Ideen zu generieren, zu verwerfen,… Captain Icon: Kostenloses Set mit 350+ Flat Icons in vielen Formaten weiterlesen

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

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… SVG & CSS: Was geht, was nicht in der Gestaltung per Stylesheet weiterlesen

Responsives SVG: Was geht, was geht nicht?

Im Webdesign sind responsive Layouts nicht mehr wegzudenken. Da gibt es auf der einen Seite immer mehr kleine Displays auf Smartphones und auf der anderen Seite immer größer werdende Monitore. Dazwischen finden sich Phablets, Tablets sowie Net- und Notebooks. Dank CSS ist es technisch kein Problem, eine Website für all die verschiedenen Auflösungen zu optimieren.… Responsives SVG: Was geht, was geht nicht? weiterlesen

Besser platzieren und transformieren dank verschachtelter SVGs

Das Erstellen von SVG-Grafiken ist eine recht unkomplizierte Sache. Wer HTML beherrscht, findet sich auch schnell in der SVG-Syntax zurecht. Allerdings gibt es einige kleine, aber durchaus relevante Unterschiede zwischen HTML und SVG, was die Positionierung von SVG-Formen betrifft. Denn diese werden grundsätzlich absolut innerhalb einer SVG-Zeichenfläche platziert. So werden Formen in SVG-Grafiken platziert Was… Besser platzieren und transformieren dank verschachtelter SVGs weiterlesen

Glyphter: Mit dieser kostenlosen Web-App bauen Sie im Handumdrehen Ihren eigenen Icon Font aus beliebigen SVGs

Glyphter.com ist einer dieser Dienste, der mich aus dem Stand überzeugte. Er ist sehr einfach zu bedienen, arbeitet komplett fehlerfrei, sieht schick aus und hält auch ansonsten alle seiner Versprechen. Noch dazu ist er kostenlos nutzbar. Was könnte man mehr wollen? Lesen Sie weiter und sehen Sie, wie Sie Ihren eigenen Icon Font aus beliebigen… Glyphter: Mit dieser kostenlosen Web-App bauen Sie im Handumdrehen Ihren eigenen Icon Font aus beliebigen SVGs weiterlesen

Adobes Snap.svg: Animationen mit HTML 5 und ohne Flash

Flash war lange Zeit der Standard für vektorbasierte Animationen im Web. Mit dem Aufkommen mobiler Endgeräte wurde Flash immer mehr von HTML5 und CSS3 verdrängt. Dank des SVG-Formates, welches mittlerweile von allen modernen Browsern unterstützt wird, können vektorbasierte Grafiken ohne Plug-in im Browser dargestellt werden. Mit der JavaScript-Bibliothek Snap.svg aus dem Hause Adobe ist es… Adobes Snap.svg: Animationen mit HTML 5 und ohne Flash weiterlesen

SVG und JavaScript: Was ist möglich, was muss beachtet werden?

Das SVG-Format gibt es zwar schon länger, war mangels flächendeckender Browserunterstützung jedoch nur bedingt einsatzfähig. Da mittlerweile alle aktuellen Browser das Format unterstützen und Flash immer mehr verdrängt wird, ist SVG noch interessanter geworden. Wie Flash ist auch das SVG-Format vektorbasiert und kann Animationen enthalten. Aber es hat noch eine Gemeinsamkeit zu Flash: Per Scriptsprache… SVG und JavaScript: Was ist möglich, was muss beachtet werden? weiterlesen

HTML 5 und SVG: Per PHP und ImageMagick generiertes PNG-Fallback für ältere Browser

Das SVG-Format hat zahlreiche Vorteile: Vor allem, dass es vektorbasiert ist, macht es zu einer Besonderheit unter den gängigen Bildformaten für Browser. Auch wenn alle modernen Browser das Format mittlerweile unterstützen, gibt es gerade beim Internet Explorer noch Probleme. Denn dieser unterstützt SVG erst ab Version 9. Da auch ältere Versionen noch stark verbreitet sind,… HTML 5 und SVG: Per PHP und ImageMagick generiertes PNG-Fallback für ältere Browser weiterlesen

CSS und SVG: 2 neue, kostenlose Dienste für Hintergründe und Verläufe in HTML 5

Zum Jahresende hin stolpere ich über zwei Dienste, die sich auf die Erstellung von Website-Hintergründen mit HTML 5 konzentrieren. Dabei setzt das Tool CSS Color Gradient Generator von ScriptsConnect auf CSS 3 und das Tool SVGeneration auf SVG. Mit mehreren Farbmodellen und Unterstützung für mehr als nur CSS kann der CSS Generator punkten, während SVGeneration… CSS und SVG: 2 neue, kostenlose Dienste für Hintergründe und Verläufe in HTML 5 weiterlesen

Freebie der Woche: Dschungel aus Vektoren

Für unsere große Schwester haben wir gemeinsam mit den Grafikern von Freevector.com ein Set von Vektor-Dateien mit Dschungelmotiven entwickelt. Wir finden die so gelungen, dass wir sie auch den Leserinnen und Lesern von Dr. Web nicht vorenthalten wollen. Immerhin findet man so etwas, anders als das nächste Speichern-Icon, nicht alle Tage. Viel Spaß mit den… Freebie der Woche: Dschungel aus Vektoren weiterlesen

Exklusives Vektor Freebie: 250 Ultimate World Monuments Icon Pack von Freepik

Und wieder einmal können wir unseren Leserinnen und Lesern in Kooperation mit unserer großen Schwester Noupe und den Betreibern der Design-Ressourcen-Suchmaschine Freepik aus dem sonnigen Spanien einen Satz Icons schenken. Heute haben wir 250 Vektor-Symbole, nämlich das „Ultimate World Monuments Icons Pack“ zu bieten. Jedes dieser Icons repräsentiert ein berühmtes Gebäude oder anderen prominenten Ort… Exklusives Vektor Freebie: 250 Ultimate World Monuments Icon Pack von Freepik weiterlesen

Fontastic.me: Frische Web-App zum freien Zusammenstellen eigener Icon Fonts

Vincent Le Moign aka Webalys ist kein Unbekannter unter Webdesignern. Erst kürzlich stellten wir Ihnen sein Projekt Agile Designers, ein Sammelbecken hochwertiger Design-Ressourcen vor. Darüber hinaus erstellt und vertreibt Webalys das Riesenset Minicons mit rund 1.500 einzelnen Piktogrammen. Massenhaft Freebies säumen seinen Weg. Heute stellen wir Ihnen mit Fontastic.me Le Moigns Interpretation eines gelungenen Icon… Fontastic.me: Frische Web-App zum freien Zusammenstellen eigener Icon Fonts weiterlesen

Lazy Line Painter für jQuery zeichnet SVG-Grafiken per Animation auf Websites

Dank des Canvas-Elementes und der Zeichenfunktionen von JavaScript ist es möglich, Grafiken im Browser zu berechnen und darzustellen. So kann man Zeichnungen per Animation auf eine Website zeichnen. Wer eine solche Animation nicht selbst programmieren will, findet im jQuery-Plugin Lazy Line Painter ein hilfreiches Tool, welches diese Aufgabe für SVG-Grafiken per JavaScript im Browser erledigt.… Lazy Line Painter für jQuery zeichnet SVG-Grafiken per Animation auf Websites weiterlesen