Haupt / Nachrichten

6 Gründe, warum Sie SVG verwenden sollten

Skalierbare Vektorgrafiken (SVGs) sind Bildtypen, die von allen Desktop- und mobilen Browsern universell unterstützt werden. Die Verwendung für das Web- und App-Design bietet enorme Vorteile. Lassen Sie sich von uns die sechs wichtigsten Gründe erläutern.

01. Die Auflösung ist unabhängig und reagiert

Bilder können genauso skaliert werden, wie wir alle anderen Elemente skalieren sich anpassendes Webdesign . Aufgrund der Vektornatur von SVG ist das Bild auflösungsunabhängig. Das Bild sieht auf jedem Display gestochen scharf aus, von den wunderschönen Pixeldichtedisplays mit ~ 285 ppi, die auf neuen Smartphones zu finden sind, bis zu den Standardmonitoren mit ~ 85 ppi.

Mit SVG können wir die Erstellung von „@ 2x. png-Bilder (es sei denn, Sie müssen IE8 unterstützen) und erstellen Sie eine Datei für alle unsere Symbole. SVG-Bilder können genauso skaliert werden, wie wir alle anderen Elemente im Responsive Design skalieren.

Die preisgekrönte Website von Sarah Drasner nutzt SVG in großem Umfang

02. Es hat ein navigierbares DOM

SVG im Browser hat ein eigenes DOM. SVG wird vom Browser als separates Dokument behandelt und dann im normalen DOM der Seite positioniert. Dies ist wichtig für die Eigenschaft 'viewBox', da wir unser Bild auf einer Leinwand beliebiger Größe zeichnen und dann in einem anderen Browser anzeigen können, ohne die Eigenschaften in der SVG zu aktualisieren. In diesem separaten, navigierbaren DOM interagieren wir auch mit Elementen in SVG mithilfe von CSS und JavaScript.

03. Es ist animierbar

Elemente in SVG können animiert werden, um wirklich erstaunliche interaktive Erlebnisse zu schaffen, oder die Animation kann verwendet werden, um einer Benutzeroberfläche, einem Bild oder einem Symbol nette kleine Details hinzuzufügen. Die Animation kann mit CSS, der Webanimations-API in Javascript oder mit der SVG-Datei erstellt werden. ' Etikett.

SVG-Animation befindet sich an einem interessanten Punkt in der Entwicklung. Google hat SMIL - das Animations-Tag von SVG - in Chrome 45 zugunsten von CSS-Animationen und der Webanimations-API abgelehnt, die Ablehnung jedoch seitdem ausgesetzt.

04. Es ist stilvoll

Mithilfe von Klassennamen oder IDs können Sie Elemente innerhalb von SVG nur mit geringfügig anderen Eigenschaften als den normalerweise verwendeten formatieren. Anstelle von 'Farbe' verwenden wir 'Füllen' und anstelle von Rand 'Strich'. Das Styling von SVG unterliegt einigen Einschränkungen, die sich aus der Verwendung von SVG auf der Seite ergeben.

Wenn Sie eine SVG-Datei als Bild-Tag verwenden, können Sie die darin enthaltenen Elemente in Internet Explorer nicht formatieren. Es gibt jedoch eine Polyfüllung - svg4jeder - was dieses Problem beheben wird.

05. Es ist interaktiv

Mithilfe von JavaScript können wir dank des navigierbaren DOM mit Elementen innerhalb von SVG interagieren. Auf diese Weise können wir interaktive Elemente mit SVG genauso erstellen wie mit HTML und CSS.

Wir können Animationen auch über JavaScript mithilfe der neuen Webanimations-API anwenden, mit der sowohl einfache als auch komplexe Interaktionen und Animationen programmiert werden können. Es gibt auch eine Reihe von JavaScript-Bibliotheken, die wir verwenden können, um SVG-Workflows zu beschleunigen.

06. Kleine Dateigrößen

Aufgrund der Vektornatur von SVG (ein Bild, das aus einem Satz von Koordinaten gezeichnet wird) sind ihre Dateigrößen bei der Optimierung im Vergleich zu fast jedem anderen Bilddateityp gering. Es gibt eine Reihe von Möglichkeiten zur Optimierung von SVG, von Befehlszeilentools bis zum manuellen Entfernen von Punkten und Gruppen SVGOMG verfügt über eine grafische Benutzeroberfläche und zahlreiche Optimierungsoptionen, die Ihnen visuell die während der Optimierung vorgenommenen Änderungen anzeigen.

Da SVGs reaktionsschnell, animiert und komplex sein können, gibt es keinen Grund, sie nicht für große Heldenbilder oder Bilder in einem Blogbeitrag oder anderen Online-Medien zu verwenden.

Designer - bleiben Sie relevant und effektiv

Es reicht nicht mehr aus, ein Photoshop-Meister zu sein. Designer müssen ihre Fähigkeiten erweitern, um relevant und effektiv zu bleiben. Aber worauf sollten Sie sich konzentrieren? Sollten Designer das Codieren lernen und wenn ja, können begrenzte Codekenntnisse bei der Arbeit mit talentierten Ingenieuren wirklich einen Unterschied machen? Wie können Designer in agile Workflows passen? Ist die Projektmethodik überhaupt wichtig? Welche Rolle spielt ein Designer beim Erstellen, Verwenden und Verwalten von Designsystemen?

Der SuperFriendly-Direktor Dan Mall wird in seinem Vortrag unter Geschichten und Perspektiven austauschen, um diese und weitere Fragen zu beantworten Generieren Sie New York vom 25. bis 27. April 2018 .

Holen Sie sich jetzt Ihr Ticket

Dieser Artikel erschien ursprünglich in Ausgabe 267 von Web Designer, dem Kreativmagazin, das Experten-Tutorials, aktuelle Funktionen und wichtige Ressourcen bietet. Abonnieren Sie noch heute.

Zum Thema passende Artikel: