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.

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!