Warum SVG ein Game Changer ist

Wäre es nicht großartig, alle Ebenen in einer Photoshop-Datei auf Ihrer Webseite animieren zu können?

Tut mir leid, das können Sie nicht - aber Sie können so etwas mit SVG-Dateien machen.

SVG ist ein Vektorformat, so dass Sie wahrscheinlich mit einem Bild beginnen, das jemand anderes erstellt hat. Google "kostenlose Vektorbilder" Das habe ich für meine Homepage getan. Wenn Sie ein Musiker sind, sind Sie besessen von Instrumenten, so dass meine Wahl eines Gitarrenverstärkers einen Muso zu Hause fühlen lässt!

Wie funktioniert SVG?

Der Hinweis liegt im Namen Scalable Vector Graphics, einer mathematischen Beschreibung einer Grafik - so dass die Nutzlast im Vergleich zu Bitmaps winzig sein kann - und das Laden der Seite ist daher schneller. www.w3.org für vollständige Spezifikation Sie können SVG mit nativem CSS animieren, aber ich würde einem Framework wie GSAP raten, sie zu manipulieren. Es hat einige kleinere Nutzlast Overhead, aber es lohnt sich.

Sie brauchen kein Framework, wenn Sie ein CSS-Wiz sind, werden Sie leicht verwalten, aber es wird ausführlicher sein und länger dauern. Es gibt viele Eigenschaften, die SVG und CSS gemeinsam sind, eine bemerkenswerte Ausnahme ist, dass die Hintergrundfarbe in CSS in SVG gefüllt wird Sie können so tief eintauchen, wie Sie möchten, in gemeinsame Eigenschaften. Eine vollständige Liste finden Sie hier... css-tricks.com

Öffnen Sie einfach eine Vektorgrafik in Adobe Illustrator und benennen Sie die Ebenen, die Sie bearbeiten möchten, mit aussagekräftigen, einprägsamen Namen. Wenn Sie in SVG speichern (gut in SVG exportieren), werden diese Namen zu DOM-IDs, die Sie ansprechen können! Fügen Sie Ereignishandler an, und Ihre Benutzer können interagieren.

Fazit: Dateigröße, Skalierbarkeit und einfach nur FUN machen SVG zu einem Muss für jeden ernsthaften Frontend-Designer.