Einige ziemlich fantastische SVG Links

Ich stoße ständig auf wunderbare SVG-Sachen. Demos, Tutorials, Tools, Kunst... einige der besten zeitlosen Ressourcen landen in unserem SVG-Kompendium. Einige davon sind meiner Meinung nach am besten für Beiträge wie diesen geeignet!

Einige davon sind ziemlich neu. Einige sind es nicht, aber ich fand sie kürzlich nützlich oder sie sind neu für mich.

SVG-Kalender

CJ Gammon schrieb über die programmatische Erstellung eines Kalenderlayouts mit SVG unter Verwendung von Snap.svg.

Siehe den Pen Calendar Generator von CJ Gammon (@cjgammon) auf CodePen.

Das hat er benutzt, um einen Kalender für seine Familie zu erstellen!

SVGeneration

SVGeneration bietet "Rezepte" für eine Reihe ziemlich klassischer SVG-basierter Muster. Das sind kleine JavaScript-Funktionen, die Parameter (die Sie anpassen können) entgegennehmen und das Muster ausgeben. Sie haben also etwas Kontrolle und können letztendlich den gewünschten SVG-Code kopieren und einfügen.

SVG Nest

Nehmen wir an, Sie haben einige Formen, die Sie aus einem Blatt Papier (oder einem anderen Material) ausschneiden möchten. Wie können Sie sie am besten anordnen, um das Material optimal zu nutzen? SVG Nest ist dafür da.

Dies ist ein häufiges Problem, wenn Sie einen Laserschneider, Plasmaschneider, CNC-Maschine usw. verwenden. In Computersprache nennt man dies das Problem des unregelmäßigen Behälterpackens.

BrooklynJS SVG Morphing Slides

Ich gab kürzlich einen sehr kurzen Vortrag bei BrooklynJS über das Morphing von SVG-Formen. Hier sind die Folien.

SVG Summit Wrap Up Slides

Ich sprach auch auf dem SVG Summit und hielt den Abschlussvortrag am Ende. Hier sind die Folien.

PostCSS Inline SVG

PostCSS Inline SVG ist ein Plugin für PostCSS, mit dem Sie eine SVG-Datei referenzieren und dann ihre Attribute mit CSS-Syntax steuern können.

Das hier

@svg-load nav url(img/nav.svg) {
    fill: #cfc;
    path:nth-child(2) {
        fill: #ff0;
    }
}
.nav {
    background: svg-inline(nav);
}

Wird zu dem hier

.nav {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23cfc'%3E%3Cpath d='...'/%3E%3Cpath d='...' fill='%23ff0'/%3E%3Cpath d='...'/%3E%3C/svg%3E");
}

Das ist meiner Meinung nach PostCSS vom Feinsten. Es ist eine clevere und nützliche Idee, die eine neue Syntax erfindet, um die Idee umzusetzen (damit sie zukünftige Entwicklungen nicht beeinträchtigt), aber sie fühlt sich vertraut an und ähnelt irgendwie einer Standard-CSS-Funktion.

Generiere schöne SVG-Polygone

Eine Demo von Sten Hougaard, die zufällige Blöcke von SVG-Polygonen generiert.

Siehe den Pen Generate beautiful SVG polygons von Sten Hougaard (@netsi1964) auf CodePen.

logomono

Wie sie sagen: "Robuste, einfarbige, schnörkellose" SVG-Logos. Es ist ein großes Repository von Logos, aber auch die Seite für das Projekt enthält einige Ideen, wie SVG-Logos am besten bereitgestellt werden können. Zum Beispiel, wie das Problem der Anzeige auf hellen oder dunklen Hintergründen in einem einzelnen Logo gelöst werden kann und wie viel Platz um die Logos herum für die Darstellung am besten ist.

logomono ist ein Werk im Gange.

SVG-Icons von SPARKK

Müssen Sie jemals *wirklich schnell* SVG-Code schnappen? Ich mag The Noun Project dafür sehr, aber selbst damit (oder seiner großartigen App) sind es ein paar Schritte. Mit SVG Icons klicken Sie einfach auf das gewünschte und kopieren den Code.

Icon Jar

Wo wir gerade von der Noun Project App sprechen, wenn Ihnen diese gefällt, dann gefällt Ihnen vielleicht Icon Jar noch besser, was wie Ihre eigene lokale, anpassbare und leistungsfähigere Version ist. Aber im Kern ziehen Sie einfach die benötigten Icons per Drag & Drop heraus.

SVG Animiertes Schlagzeug

Spielen Sie es! Sehr coole Demo von Josh Ellis.

Siehe den Pen SVG Animated Drum Kit (Play Me!) von Josh (@iamjoshellis) auf CodePen.

Newsletter / Podcast

Wenn Sie, wie ich, ständig von neuen SVG-Sachen hören möchten, hat Jachin Sheehy einen wöchentlichen Newsletter namens SVG Weekly und Rob Levin hat einen Podcast namens SVG Immersion.