Skalierbare Vektorgrafiken – Das Internet hat seither einen langen Weg zurückgelegt HTML5 wurde populär und die Leute begannen, sich das anzuschauen JavaScript als eine Sprache, die in der Lage ist, viel komplexere Anwendungen zu entwickeln. Infolgedessen mehrere APIs sind aufgetaucht und es gibt zahlreiche Inhalte darüber, wie Browser sie alle mit SVG (Scalable Vector Graphics) verarbeiten können.
Vor ein paar Jahren wurde die Microsoft wendete einen differenzierten Designansatz für alle seine Anwendungen und Dienste sowie alle Benutzeroberflächen für mobile Geräte an. Mit dem Aufkommen von iOS 7, Apple hat seine Aussehen- und Formatprinzipien zugunsten des Guten ersetzt klares und minimalistisches Design. Dennoch ist Googles Einführung von „Material Design“, das überall verwendet werden kann, von Apps bis zum Web.
Zunächst einmal liegt der Hauptvorteil von SVG – der im Internet gut bekannt ist – darin seine skalierbare Natur. Beim Zusammenstellen eines Symbols muss sich der Designer keine Gedanken über „wie wird es ihm gehen” in verschiedenen Dimensionen oder auf Mobilgeräten mit unterschiedlichen Pixeldichten und Fokussierungen Nur dabei, die Ressource bestmöglich zu gestalten.
Bei SVGs ist es nicht erforderlich, zwei verschiedene pixelbasierte Dateiformate zur Anzeige zu exportieren Retina-Modus Es ist Nicht-Netzhaut. Tatsächlich besteht kein Grund zur Sorge um die Pixeldichte auf den einzelnen Geräten, vor allem angesichts deren nicht standardisierten Charakters, sondern Sie müssen sich lieber auf das Kunstwerk konzentrieren.
Sobald das Symbol fertig ist, exportiert der Designer es in eine einzelne Datei im Format „.SVG“, dessen Größe vom Entwickler ohne Qualitätsverlust geändert werden kann, indem einfach Attribute angewendet werden „Breite" Es ist "Höhe” mit ihren jeweiligen Werten.
Unten sehen Sie ein Beispiel des Firefox-Browserlogos:
upload.wikimedia.org/wikipedia/commons/7/76/Mozilla_Firefox_logo_2013.svg
Obwohl die generierten Dateien „.SVG" sei einfach XML, ist es viel wahrscheinlicher, dass Sie a verwenden Vektorbild-Editor. Die häufigsten Alternativen sind Adobe Illustrator Es ist Inkscape, aber unter macOS haben wir eine andere sehr gute Alternative namens skizzieren.
Außerdem funktioniert SVG am besten, wenn es nicht so komplex ist. Dies liegt daran, dass die Größe abhängig davon, was Sie entwickeln, stark zunehmen kann: Volltonfarben sind beispielsweise viel kleiner als Farbverläufe. Das bedeutet jedoch nicht, dass Sie keine komplexen Grafiken verwenden können. Bedenken Sie jedoch das Problem der Dateigröße, wenn Sie beispielsweise SVG auf einer Seite verwenden.
Wenn Sie die Software Adobe Illustrator verwenden, können Sie einige Maßnahmen ergreifen, um diese Komplexität beim Exportieren der SVG-Datei erheblich zu reduzieren. Als Erstes müssen Sie die Grafik erweitern und dabei die Attribute ändern, die ihr Aussehen und andere Eigenschaften der darin enthaltenen Elemente definieren. Dies hilft auch bei Dingen wie Deckkraft und Farbverläufen.
Ein weiterer wichtiger Aspekt, auf den Sie achten müssen, ist, dass beim Exportieren auch einige Dinge zu tun sind. Profil auswählen SVG 1.1, das ist es, was hat größere Kompatibilität zwischen Browsern heute. Die Profile SVG Tiny 1.1 und die anderen SVG-Varianten richten sich an mobile Geräte, bieten aber noch keine ausreichende Unterstützung.
Wenn Sie Text nicht dynamisch bearbeiten müssen, konvertieren Sie außerdem alle Schriftarten in Objekte. Dadurch wird sichergestellt, dass der Text die von Ihnen definierten Eigenschaften beibehält, ohne dass sich die endgültige Größe der Datei erhöht, da es sich bei den Texten praktisch nur um Objekte handelt.
Da es sich um eine textbasierte Datei handelt, ist die SVG Es verfügt über einen hervorragenden Kompressionsfaktor für verschiedene Segmente. Eine Datei von 30 KB, zum Beispiel, fällt auf 9,6 KB wenn es mit Technologie bedient wird GZIP. Wenn Sie die Technik von verwenden Daten-URIs, eine Datei mit 13 KB fällt auf 4,9 KB wenn es mit der GZIP-Komprimierungstechnologie bereitgestellt wird.
Hoffe das hilft!
Teilen Sie den Artikel und hinterlassen Sie Ihre Kommentare! 🙂
