10 goldene Regeln für reaktionsschnelle SVGs

Die vielen Vorteile von SVG - einschließlich unendlich skalierbarer Vektorbilder, kleiner Dateigrößen und direkter Integration in das DOM - machen es zu einer natürlichen Lösung für sich anpassendes Webdesign . Obwohl die SVG-Spezifikation ein Jahrzehnt alt ist, gibt es aufgrund der relativ neuen Unterstützung in vielen Browsern und Tools immer noch eine Reihe von Tricks, Lücken und Fallstricken, die selbst erfahrene Webdesigner und -entwickler auffangen.

Hier habe ich die wichtigsten davon als 10 goldene Regeln zusammengefasst.

01. Richten Sie Ihre Werkzeuge richtig ein

So wie ein Handwerker seine Werkzeuge vor Arbeitsbeginn schärft, muss jeder, der mit SVG arbeitet, seine Anwendungen so einrichten, dass das Vektorformat auf die effizienteste und optimierteste Methode geliefert wird. Es sind eine Reihe von Einstellungen zu implementieren.



Wenn es keine zwingenden Gründe gibt, setzen Sie die Messungen in Ihrem Vektorwerkzeug auf 'Pixel'. Während es für SVG keine Rolle spielt (was das messen wird viewBox und Elemente glücklich in fast jedem Messsystem) ist es sinnvoll, die SVG-Zeichnung mit gängigen CSS-Einheiten zu entwickeln, anstatt die Druckvorgabe von Zoll; und es macht es auch viel einfacher hinzuzufügen @Hälfte Fragen und andere Eingriffe später.

Machen Sie den Leinwandbereich nicht größer als nötig. Wie bei Bitmap-Bildern wird kein Leerzeichen in der SVG verwendet und wird am besten durch CSS-Ränder ersetzt. Beachten Sie, dass viele Vektorwerkzeuge, wie z. B. Skizze, den Zeichenbereich automatisch auf ausgewählte Elemente zuschneiden.

Schneiden Sie gleichzeitig den Leinwandbereich nicht auf die exakten Kanten von Elementen zu. Antialiasing wird weiterhin auf das SVG angewendet, und ein zu enges Schneiden kann auch das Antialiasing ausschneiden. Lassen Sie stattdessen mindestens 2 Pixel frei, wenn sich der Rand der Leinwand einem Element nähert.

Reaktionsfähigkeit und Leistung hängen eng zusammen. Stellen Sie daher die Dezimalgenauigkeit auf nicht mehr als zwei Punkte ein. SVG denkt nicht in ganzen Zahlen, daher kann ein Vektorpunkt einen Wert von 1,45882721px haben. Diese extreme Präzision ist völlig unnötig und erhöht nur das Aufblähen des Codes und die Dateigröße. Daher ist es besser, sie an dieser Stelle abzuschneiden.

Zeichnen Sie auf ähnliche Weise Vektorformen mit möglichst wenigen Punkten. Viele neue Designer gehen davon aus, dass mehr Punkte besser sind, wenn das Gegenteil der Fall ist: Einige gut platzierte Punkte bieten eine bessere Kontrolle über ein Element und reduzieren gleichzeitig die Dateigröße.

Machen Sie sich keine Sorgen, wenn Sie Vektordateien erhalten, die dieser Regel nicht entsprechen Vektorgrafiken Anwendungen verfügen über die Option 'Vereinfachen', mit der Sie die Anzahl der Punkte in einem Element reduzieren können, ohne dessen Form zu ändern. Alternativ würde ich für detaillierte Arbeiten ein Plugin wie VectorScribe von Astute Graphics vorschlagen.

02. Entfernen Sie Höhen- und Breitenattribute

Die meisten Apps fügen ihrem SVG-Export viel proprietären, unnötigen Code hinzu. Der einzige erforderliche Code am Anfang der meisten SVG-Dateien ist der folgende:

Für unsere Zwecke ist der wichtigste Aspekt die Entfernung der Breite und Höhe Attribute, die die meisten Anwendungen automatisch enthalten. Dadurch reagiert die SVG in modernen Browsern vollständig.

Wenn Sie viele SVGs verarbeiten oder in Eile sind, müssen Sie diesen Schritt nicht von Hand ausführen. Stattdessen können Sie den Vorschlägen der dritten goldenen Regel folgen ...

Verwenden von Indesign, um ein Buch zu erstellen

03. SVG-Ausgabe optimieren und minimieren

Eine Kombination aus intelligenter Handbearbeitung und Optimierung der Postproduktion kann die SVG-Dateigröße deutlich reduzieren

Eine Kombination aus intelligenter Handbearbeitung und Optimierung der Postproduktion kann die SVG-Dateigröße deutlich reduzieren

Unabhängig davon, mit welchem ​​Tool Sie Ihre SVG-Inhalte erstellen, lohnt es sich dennoch, die Ausgabe mit einem Tool wie dem zu verarbeiten SVGOMG , wodurch der Code deutlich gekürzt wird. In der Regel können Sie etwa 20 bis 80 Prozent der Dateigröße einsparen. Der gleiche Code kann lokal integriert werden als Schluck- oder Grunzaufgabe .

04. Code für IE ändern

In Regel 2 wurde erwähnt, dass korrekt optimierte SVGs in modernen Browsern vollständig reagieren. Das stimmt, wenn wir Microsoft Edge als modernen Browser betrachten. Für IE 9-11 müssen wir einige Probleme beheben. Wenn wir die SVG als Bild verwenden:

Wir können IE9-11 zwingen, das Bild mithilfe der CSS-Attributauswahl korrekt anzuzeigen:

img[src$='.svg'] {width: 100%;}

SVG-Bilder funktionieren in der allgemeinen Produktion gut, haben jedoch eine eingeschränkte Interaktivität: Die meisten Browser ignorieren Interaktivität und Animation in einer SVG, die auf einer Seite als platziert ist . Darüber hinaus sind SVG-Bilder eine zusätzliche HTTP-Anforderung für den Browser.

Aus diesen und anderen Gründen wird SVG zunehmend inline eingesetzt. In diesem Fall muss der SVG-Code für IE etwas besser behandelt werden:

Zusätzlich zu bewahrenAspectRatio Attribut, IE benötigt etwas mehr Anleitung, um die korrekte Skalierung des Bildes beizubehalten: Nehmen Sie die Breite der SVG ( 365 in diesem Fall) teilen Sie es durch die Höhe ( 525 ) und multiplizieren Sie das Ergebnis mit 100 Prozent. Dies wird die Polsterung unten Wert für die SVG, 'stützt' sie im IE so weit, dass die SVG im richtigen Seitenverhältnis angezeigt wird:

wie man ein Manga-Künstler wird

Beachten Sie, dass die Codebeispiele im Rest dieses Artikels diese Änderungen nicht enthalten, um die Übersichtlichkeit und Klarheit zu gewährleisten. Amelia Bellamy-Royds hat eine geschrieben ausgezeichneter Artikel über die Skalierung von SVG .

05. Betrachten Sie SVG als Heldentext

Wenn Sie SVG für Heldentext verwenden, wird es automatisch entsprechend seinem Container skaliert

Wenn Sie SVG für Heldentext verwenden, wird es automatisch entsprechend seinem Container skaliert

Derzeit gibt es keinen CSS-Standard für die Größenänderung von Text in seinem Container. Es ist möglich, Text mit vw-Einheiten zu skalieren, dies erfordert jedoch fast immer mindestens zwei Eingriffe in Medienabfragen, um den Text an bestimmten Grenzen des Ansichtsfensters zu 'klemmen'. Die Größe von SVG-Text wird jedoch automatisch in einen Container geändert:

Kauai

Das CSS:

header svg text { font-weight: 900; font-size: 90px; fill: blue; }

Wenn Sie die SVG-Datei inline halten, bleiben die Zugänglichkeit und der SEO-Wert erhalten, und der Text kann mit jeder bereits in die Seite eingebetteten Schriftart gestaltet werden. Sehen Hier für mehr Informationen.

06. Lassen Sie Breite und Höhe für progressive Symbole an Ort und Stelle

Auf diese Sprechblase wurde eine nicht skalierende Strichlinie angewendet, damit sich die Breite nicht ändert, wenn die Größe des Ansichtsfensters geändert wird

Auf diese Sprechblase wurde eine nicht skalierende Strichlinie angewendet, damit sich die Breite nicht ändert, wenn die Größe des Ansichtsfensters geändert wird

Eine Ausnahme von Regel 2 bilden Symbole und kleine Logos, die ihre beibehalten sollten Breite und Höhe Attribute, wenn Sie möchten, dass sie schrittweise erweitert werden:

Codepen

Sie können ein Beispiel für diese Technik in Aktion sehen Hier .

Wenn wir die Größe der SVG-Symbole nur mit CSS ändern und das Stylesheet der Site nicht geladen wird, werden die Symbole in der Standardgröße eines ersetzten Elements angezeigt: 300 x 150 Pixel. Indem wir Höhe und Breite als Attribute beibehalten, können wir sie standardmäßig auf die nächstgelegene vernünftige Berührungsgröße skalieren und unser CSS verwenden, um die Darstellung zu verbessern.

07. Verwenden Sie Vektoreffekte, um die Haarlinien dünn zu halten

Standardmäßig skaliert SVG alles mit dem Ansichtsfenster, einschließlich der Strichstärke. Normalerweise funktioniert dies einwandfrei, aber in einigen Fällen - insbesondere bei Diagrammen und Strichen, die als Effekte auf die Außenseite von Text angewendet werden - möchten Sie Striche möglicherweise unabhängig von der Größe der Zeichnung gleich dick halten. Dies ist die Domäne der wenig bekannten Vektoreffekt Eigenschaft, die als Präsentationsattribut oder in CSS angewendet werden kann:

path { fill: #fff; stroke: #111; stroke-width: 2; vector-effect: non-scaling-stroke; }

Schau es dir an ein vollständiges Beispiel für diese Technik .

08. Erinnere dich an Bitmaps

Viele Entwickler gehen davon aus, dass SVG nur Vektoren verwenden kann, JPEGs und PNGs können jedoch auch auf eine SVG-Zeichnung angewendet werden. Und solange Sie meine Regeln bisher befolgt haben, reagieren diese Bilder, wenn Sie eine Bitmap über das hinzufügen Etikett:

09. Betrachten Sie adaptive Lösungen

Das klassische Coca-Cola-Logo wird in verschiedenen adaptiven Größen gerendert

Das klassische Coca-Cola-Logo wird in verschiedenen adaptiven Größen gerendert

Es ist nur ein Teil des reaktionsschnellen Designs, Dinge zum Quetschen zu bringen. Bei RWD geht es im weiteren Sinne des adaptiven Designs darum, geeignete Inhalte in allen Ansichtsfenstergrößen zu präsentieren.

Dies kann auf verschiedene Arten erreicht werden. responsivelogos.co.uk bietet eine Reihe von Beispielen, die SVG-Sprites verwenden. Ich bevorzuge es jedoch, Medienabfragen in die SVG zu integrieren, um so genannte 'Branding-Module' zu erstellen. Dieser Ansatz ermöglicht es mir, die Sichtbarkeit von Komponenten hinzuzufügen, zu entfernen und zu ändern. Lesen Sie mehr über adaptive Branding-Module in meinem Artikel .

Dieselbe Technik kann für Diagramme, Abbildungen, Karten und mehr verwendet werden. In den einfachsten Modulen kann das CSS selbst in die SVG geschrieben werden, sodass es überall verwendet werden kann, wie in der vorherigen Regel beschrieben.

10. Integrieren Sie Medienabfragen in SVG

Viele Menschen wissen nicht, dass CSS-Medienabfragen in SVG selbst geschrieben werden können:

svg g { transition: 1s; } @media all and (max-width: 90rem) { #drink, #coke { opacity: 0; } }

Es ist wichtig zu beachten, dass die Medienabfrage nur das Element 'sehen' kann, in dem sie sich befindet: Das heißt, jede Messung bezieht sich auf das Element selbst, nicht auf die Seite. Ein möglicher Nachteil dieses Ansatzes besteht darin, dass der Canvas-Bereich des SVG im Verhältnis zu den darin enthaltenen Elementen immer gleich bleibt.

Dies kann zu sehr kleinen Elementen bei kleinen Ansichtsfenstergrößen führen, die in einem relativ großen Leinwandbereich eingerahmt sind. Hierfür gibt es mehrere Lösungen, einschließlich Ändern der Größe der ViewBox und Skalieren Sie die Elemente, um dies zu kompensieren .

Fazit

Die unendliche Skalierbarkeit von SVG ist das größte Kapital, aber eine Funktion, die von Browsern und Vektorgrafik-Editoren immer noch etwas unterbewertet wird. Indem Sie diese Richtlinien in Ihren Produktionsworkflow integrieren und an andere in Ihrem Team weitergeben, können Sie eine reibungslos reagierende SVG-Datei für das Web erstellen, die Teil der Ressourcen ist, die Sie täglich in der Entwicklung verwenden.

wie man einen muskulösen Körper zeichnet

Dieser Artikel erschien ursprünglich in Netzmagazin Ausgabe 283; kauf es hier !

Zum Thema passende Artikel: