SVG-Hacks für Sie

Mich hat Bytes #293, die Hauptsache zu HTML, motiviert. Ihre Motivation kam von der State of HTML 2023-Umfrage (und von Geld... aber lassen wir den gesponserten Bereich beim Mailing außen vor).

Es scheint, dass

Einstiegspunkt

Wenn Sie mit diesem Zeug überhaupt nicht vertraut sind, kann ich Ihnen mit einer Reihe von Links für den Anfang helfen. Danach wird sich nichts ändern, aber Sie werden etwas mehr über SVG wissen
¯_(ツ)_/¯

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Introduction
• SVG-Tutorial von MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started

Tl;DR

SVG-Elemente sind Vektorgrafikelemente. Dies kann als eine Ansammlung geometrischer Figuren verstanden werden, die in Zeichen dargestellt werden. Als kostenlose Alternative können Sie beispielsweise eines mit Adobe Illustrator oder Inkscape erstellen.

Ausgangspunkt

Aus den Antworten der Menschen können wir einige Muster erkennen. Ich werde kein bestimmtes Thema auswählen, aber ich werde versuchen, etwas Wissen zu diesen Themen weiterzugeben, sodass Sie hier einige Tipps und Tricks, den Erfahrungsaustausch und anderes allgemeines Wissen zu diesem Thema finden können.

Ich werde das SVG-Sprites-Thema wie in diesem Beispiel überspringen. Es ist ein separates Thema und hat nicht viel mit dem SVG-Tag zu tun. Ich kann nur zustimmen, dass Sie noch ein paar seltene Anwendungsfälle dafür finden könnten.

Dateisyntax

Eine richtige SVG-Datei sollte eine Darstellung der genannten geometrischen Figuren sein. Es ist sehr einfach zu überprüfen, ob unser Symbol vom Designer oder von der Website, auf der Sie es verwenden, im richtigen Format erstellt wurde.

Falsches Beispiel:

<svg ...><image link:href="data:image/png;base64 .../>

Erwartete Syntax:

<svg><g><path r=""/><circle /></g></svg>

Während meiner Karriere bin ich einige Male in diese Situation geraten. Es lohnt sich, daran zu denken. Dies passiert, wenn Sie Rastergrafiken aufnehmen, diese in ein Vektorgrafikprogramm importieren und versuchen, sie mit der Erweiterung .svg zu exportieren. Es wandelt Ihr Bild nicht auf magische Weise in eine Vektorgrafik um.

Bemerkenswerte SVG-Tags

Ich kann Ihnen einen Spickzettel für die meisten generischen SVG-Elemente präsentieren.

Tag	Description	Animated attributes
	used for grouping elements	-
	main tag for your actual icon. Avoid modifying the d="" attribute on your own ? It is possible but be careful with that. Grab a link with an explanation for each character group. To animate your path use animateMotion tag	-
	Basic rectangle shape in SVG. Simple as that	✅
	Simple as that. The line between two points. Don't mistake with the stroke attribute! It can also be used on the line tag.	✅
	You can think about it as an enhancement version of the g tag but it keeps the elements inside invisible for later use with, let's guess it... use tag	-
	Next basic shape. Be careful as the size is defined by radius and you position your circle with cx and cy attributes.	✅
	Let's call it a custom shape. They are connected straight lines where the last point connects to the first point.	✅
	Very similar to the previous one but with a notable difference. The last point doesn't need to be connected to the first point.	✅

Bitte beachten Sie, dass es sich hierbei nur um einige ausgewählte SVG-Elemente handelt. Ich habe gerade die häufigsten beschrieben. Es stehen Ihnen noch viel mehr zur Verfügung. Eine vollständige Liste finden Sie hier.

Dimensionierung und Positionierung

Da wir jetzt mit einigen der gebräuchlichen SVG-Tags vertraut sind, können wir mit dem nächsten Absatz über die Änderung der Basisparameter unseres Symbols fortfahren.

Nehmen wir an, wir arbeiten mit einem jungen Designer zusammen. Er/Sie weiß noch nicht genau, wie er/sie Dinge für das Web vorbereiten soll, so wie Sie. Dadurch erhält man manchmal leicht unterschiedliche Icon-Größen mit fehlender Schnittpolsterung an den Seiten.

good one	wrong one

Klassisches Gehäuse. Ich weiß, wir sollten kurz mit einem Designer telefonieren und das klären, aber wir möchten hier etwas über SVG lernen. Das machen wir in diesem Szenario nicht. Wir können es selbst reparieren.

Aus der Code-Perspektive dreht sich alles um Attribute. Die ursprüngliche SVG-Cross-Datei sieht so aus:

<svg ...><image link:href="data:image/png;base64 .../>

Ergebnisse in:

Fast das, was wir wollen! Schauen wir uns genauer an, wie wir die Polsterung wie im ersten Symbol beibehalten können.

Wir haben 2 Möglichkeiten. Wir können den gleichen viewBox-Wert beibehalten oder jeden Breiten-, Höhen-, X- und Y-Wert für jedes verschachtelte Tag anpassen.

Die erste Option scheint einfach zu sein und funktioniert für uns ganz gut, aber es könnte einen Haken geben. In meinem Fall hatte ich dieses seltsame Transformationsattribut in meinem Gruppen-Tag.

<svg><g><path r=""/><circle /></g></svg>

Jetzt ist die Größe unseres Symbols anpassbar. Bitte beachten Sie, dass es sich um Vektorgrafiken handelt, damit die Symbolqualität nach der Größenänderung nicht verloren geht.

Warum ist viewBox so wichtig?

Es ist der Schlüssel, wenn wir unser Symbol richtig skalieren oder eine bestimmte Position festlegen möchten. Es hat 4 Argumente viewBox="min-x min-y width height".

viewBox="0 0 100 100" bedeutet beispielsweise, dass sich die obere linke Ecke bei (0, 0) befindet und die viewBox 100 Einheiten breit und 100 Einheiten hoch ist.

Das bedeutet, dass Sie die x- und y-Attribute Ihres Symbols anpassen müssen, nachdem Sie viewBox geändert haben, da sie entsprechend ihrem Wert festgelegt sind.

Verwalten von Farben und Füllungen

Unterschiedliche Symbole ermöglichen unterschiedliche Füllungen. Natürlich kann es so einfach sein wie das Hinzufügen eines Farbstils, aber das ist ein Codetyp für Anfänger.

Echte Entwickler fügen fill-rule="evenodd" zum Hauptelement hinzu und löschen alle anderen manuellen Füllattribute aus Tags ?

Sie fragen sich vielleicht, warum.

Ich werde hierauf eine möglichst kurze Antwort geben. Zur freien Anpassung unserer Symbolfarben mit einer Codezeile direkt aus unserer IDE.

Wie ist das möglich, fragen Sie sich vielleicht.

Wenn Sie ein einfaches Symbol aus dem Designsystem Ihres Unternehmens verwenden, sollten Sie nur ein Symbol importieren können. Modifikationen oder Vervielfältigungen in Größe oder Farbe sind nicht erforderlich.

Aus Code-Sicht müssen Sie dem SVG-Element lediglich eine Füllung hinzufügen, wie Sie es normalerweise beispielsweise mit dem Farbattribut tun würden.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="93.582886"
   height="93.582893"
   viewBox="0 0 24.760471 24.760474"
   version="1.1"
  >



<p>This is our raw svg exported from Inkscape. There are a few other things to fix, bear with me so we can fix them.</p>

<p>We know that 200px image is our goal. Here we have some ugly width/height values on the main svg tag.</p>

<p>Simply:<br>
</p>

<pre class="brush:php;toolbar:false"><svg
-   width="93.582886"
+   width="200"
-   height="93.582893"
+   height="200"

Es gibt einen Haken für den geraden oder ungeraden Wert, der beim Zeichnen von Polygonen oder Pfaden gilt. Es füllt nur die Innenseite sich kreuzender Pfadsegmente aus.

Erwägen Sie, dieses Beispiel zu analysieren, falls Sie damit Schwierigkeiten haben.

Im Fall unseres Kreuzsymbols ergibt sich also etwa Folgendes:

Optimieren

Bevor wir unser Symbol im Web veröffentlichen (oder direkt nachdem wir es von Figma heruntergeladen haben), sollten wir sicherstellen, dass es richtig optimiert ist. Dieser ist sehr wichtig. Ich bin bei der Codeüberprüfung auf dieser letzten Meile viel zu oft erwischt worden und wurde viel zu oft erwischt.

SVGO (oder SVGR für reagieren) macht es zu einem sehr einfachen Prozess. Hinter den Kulissen werden größtenteils alle unnötigen Dinge für uns gelöscht.

Im Allgemeinen ist es ein Werkzeug der Wahl. Entweder möchten Sie es in Ihren Bundler integrieren oder über die CLI verwenden. Es ist sofort nach der Installation einsatzbereit, da die Standardvoreinstellungen sofort konfiguriert werden.

Hinweis: Sie können die Standardvoreinstellung überschreiben, wenn Sie wirklich möchten. Überprüfen Sie die Konfiguration in der README-Datei des Projekts und in der Plugin-Liste in den Dokumenten

Ergebnis

Der endgültige Symbolcode sieht so aus:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><g fill-rule="evenodd"><path d= „M9 24h32v3H9z“>



<p>Wir haben die Größe von 871 Byte mit aus dem Inkspace exportierten Rohsymbol auf nur 322 Byte reduziert.</p>

<h2>
  
  
  Schmerz mit Animationen
</h2>

<p>Das letzte Thema, das für mich bittersüß ist. Es wurde auch ein paar Mal in den Umfrageantworten erwähnt. Ich kenne keine bessere Möglichkeit, dies zu tun, als Lottie zu verwenden oder SVG-Elemente manuell in CSS zu animieren. Die zweite Option ist eine absolute Qual, wenn Sie mehr als 5 Elemente animieren müssen.</p>

<p>Natürlich ist es möglich und wir können es schaffen, aber ehrlich gesagt gibt es noch mehr interessante Dinge zu tun?</p>

<p>Angenommen, Sie sind immer noch neugierig, wie es geht. Ich hinterlasse hier einen Link zu einem tollen Artikel. Es sollte Sie davon überzeugen, dass es Geduld erfordert und mehr als 5 Minuten dauert. Ich frage mich, ob Ihnen ein KI-Bot dabei helfen kann! Wenn ja, ist es vielleicht etwas weniger schmerzhaft.</p>

<p>Das war's vorerst.<br>
Hoffentlich haben Sie etwas aus diesem Beitrag mitgenommen und wünschen Ihnen einen schönen Tag?</p>


          

            
        

Das obige ist der detaillierte Inhalt vonSVG-Hacks für Sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!