'Resknable' SVG -Symbole: Wie man sie macht (..und warum)

SVG -Symbole werden dank ihrer Skalierbarkeit, kleinen Dateigrößen und CSS -Styling -Funktionen zunehmend im modernen Webdesign verwendet, wodurch sie ideal für reaktionsschnelle Websites sind.

Obwohl SVG mit CSS gestylt werden kann, funktioniert dies nur, wenn der SVG -Code in die HTML -Seite eingebettet ist. Dies bedeutet, dass ein einzelner Teil des SVG nur geändert werden kann, wenn das SVG eingebettet ist.

In diesem Artikel wird das Konzept der "abnehmbaren SVG -Symbole" eingeführt, wobei das "Skelett" des SVG -Bildes unverändert bleibt, aber das Erscheinungsbild der Oberfläche kann leicht geändert werden.

Der Artikel schlägt eine Lösung für das Problem vor, einen einzelnen Teil von SVG nicht zu ändern. Dies beinhaltet das Erstellen eines Symbols für jede Form im SVG, jedes Symbol in derselben Viewbox, sodass für jedes Element Stile bei Bedarf ermöglicht werden können.

Der Autor beschreibt den Workflow des Erstellens von SVG -Symbolen mit Adobe Illustrator und Gulp und stellt fest, dass diese Methode mit allen modernen Browsern kompatibel ist.

Die weit verbreitete Verwendung von

SVG auf modernen Webseiten wurde im Jahr 2016 dank seiner Funktionen der Dateigröße, der Skalierbarkeit und des CSS -Stylings erheblich verbessert.

Es kann im Symbolsystem verwendet werden (siehe Erstellen Ihrer eigenen SVG -Symbole), obwohl in einigen Fällen Symbolschriften vorzuziehen sind (siehe Icon Wars: Schriftarten und SVG).

, aber SVG kann auch für Logo oder grafische Elemente (zumindest nicht zu komplexen Elementen) verwendet werden, und seine natürliche Flexibilität macht es zur perfekten Lösung für reaktionsschnelle Websites (siehe Sara Soueidans "Reaktionsfreudiger SVG mit CSS").

Die Verwendung von SVG kann CSS nutzen, um die Größe und Farbe eines gesamten Elements zu lokalisieren und zu ändern. Es ist jedoch nicht möglich, seine einzelnen Teile auf diese Weise zu ändern, es sei denn, Ihr SVG -Code ist in eine HTML -Seite eingebettet.

Frage

Schauen wir uns ein einfacheres Beispiel an. Hier ist ein Bild, das wir in mehreren Farben anzeigen müssen.

traditionell erstellen wir drei getrennte Bilder - seien mit einem anderen "Stil". Aber was ist, wenn wir eine einzelne SVG -Datei verwenden und sie beim Rendern stylen möchten?

Gibt es auch eine Möglichkeit, unsere Bilder in "SVG -Symbole" zu machen, um den Browser -Cache zu nutzen?

Ich nenne es das "angeschlossene SVG -Symbol" - das "Skelett" des SVG -Bildes bleibt gleich, aber das Erscheinungsbild der Oberfläche ist leicht zu verändern.

Die ideale Lösung besteht darin, über den CSS -Selektor auf das symbolische Element zuzugreifen und ihm einige Regeln hinzuzufügen (gleiche Methode, die von eingebettetem SVG verwendet wird).

Im folgenden Beispiel habe ich jedem Dreieck eine Klasse (oben, rechts, unten und links) hinzugefügt, das Bild als Symbole angeordnet und versucht, es über CSS zu ändern, wie folgt:

.top { fill: #356BA5; }
.right { fill: #357FD9; }
/* and so on... */

Leider funktioniert dies im Moment nur für Firefox, wie in der folgenden Codepen -Demonstration gezeigt. Nur auf Firefox wird das zweite Bild in einem blauen Farbton erscheinen (ich habe den symbolischen Code für die Bequemlichkeit in den Stift eingebettet, aber die Verwendung einer externen SVG -Datei wird das gleiche Ergebnis erzielen).

codePen Link 1

codePen Link 2

In großen Projekten haben wir möglicherweise viele solcher Elemente, und Wartungsprobleme sind ein wichtiger Faktor, daher suche ich immer nach einer Möglichkeit, Projektressourcen besser zu organisieren.

Mein Ziel ist eine reine CSS -Lösung: Das vorherige Beispiel könnte mit einem einzigen Dreieck -SVG umgeschrieben werden, das über CSS gedreht, bewegt und schattiert werden kann.

Aber ich mag diese Lösung nicht: Es scheint mir, dass es das Problem nur verschiebt und das Problem nicht löst. Wie viele reale Logo-Komponenten haben die gleiche Form?

Sara Soueidan erklärt dieses Problem besser als ich und bietet uns eine clevere Lösung für die Verwendung von CSS -Variablen. Leider sind CSS -Variablen immer noch eine experimentelle Technik, und Microsoft -Browser unterstützen sie nicht.

Lösung

Wie oft ist die Lösung so einfach, dass Sie sich dumm fühlen werden, weil Sie es vorher nicht erwartet haben.

Ich habe es vor ein paar Monaten entdeckt, als ich das neue Medium -Logo sah (es scheint, als hätte Medium ihren Logo -Code geändert - man muss mir glauben).

Sie können sehen, dass das mittlere Logo aus vier "Formen" besteht, die jeweils mit einer anderen festen Farbe gefüllt sind. Die Schwarz -Weiß -Version ist die gleiche wie die grüne Version (mit Ausnahme der Farbe natürlich).

Die Lösung für den Besitz beider Versionen einer einzelnen Datei besteht darin, einfach ein Symbol für jede Form zu erstellen, jedes Symbol im selben ViewBox .

Wenden wir es auf unser Beispiel an und erstellen Sie ein Symbol für jede Form im Bild. Sie alle teilen sich dieselbe Viewbox (0 0 54 54) des gesamten Bildes, sodass sie ohne zusätzliche Anweisungen in der richtigen Position positioniert sind. Vermeiden Sie es einfach, Füll-, Schlaganfall-, Stil- und andere Attribute im Symbolcode zu verwenden.

<svg xmlns="https://www.w3.org/2000/svg">
    <symbol id="top" viewBox="0 0 54 54">
        <polygon points="54 0 0 0 27 27 54 0"></polygon>
    </symbol>
    <symbol id="right" viewBox="0 0 54 54">
        <polygon points="54 54 54 0 27 27 54 54"></polygon>
    </symbol>
    <symbol id="bottom" viewBox="0 0 54 54">
        <polygon points="0 54 54 54 27 27 0 54"></polygon>
    </symbol>
    <symbol id="left" viewBox="0 0 54 54">
        <polygon points="0 0 0 54 27 27 0 0"></polygon>
    </symbol>
</svg>

Jetzt können wir sie zu einem einzelnen SVG -Behälter kombinieren:

<svg>
    <use class="top" xlink:href="#top"></use>
    <use class="right" xlink:href="#right"></use>
    <use class="bottom" xlink:href="#bottom"></use>
    <use class="left" xlink:href="#left"></use>
</svg>

Jedes Gebrauchselement kann nach Bedarf gestylt werden, und vor allem ist es mit allen modernen Browsern kompatibel:

codePen Link 3

Das war's.

Wir müssen nur unsere SVG -Dateien wie diese arrangieren. Natürlich können wir es manuell tun, aber wenn Sie viele grafische Elemente verwalten müssen oder wenn Sie sie schnell in mehr Projekten bearbeiten und wiederverwenden müssen, benötigen Sie einen intelligenteren, schnelleren Workflow. Ich habe eine Lösung mit Adobe Illustrator und etwas Schluck gefunden.

SVG -Symbol -Konstruktions -Workflow

Das Prinzip dieser Technik ist das gleiche wie ich in den Artikeln "Erstellen Sie Ihre eigenen SVG -Symbole" und "Symbolschriften erstellen mit Illustrator und Icomoon erstellen". Schauen Sie sich sie also für den ersten Schritt an.

Angenommen, wir haben zwei Elemente, genau wie das Bild unten. Jedes Element ist in einer bestimmten Kunstkarte angeordnet:

Für die Bequemlichkeit haben wir ihnen einige Farben hinzugefügt, obwohl wir wissen, dass die Füllfarbe (und falls vorhanden, Schlaganfall, Schlaganfallgröße usw.) über CSS bearbeitet werden.

Da jedes Symbol seine Kunstboote haben muss, müssen wir jetzt jedes Bild in so viele Artboards wie jeder farbige Teil unterteilt.

Dies kann sehr schnell im Illustrator erfolgen, jedes Element schneiden, die Ziel -Kunstboard auswählen und den Befehl einfügen.

Beachten Sie, dass jede Artboard einen bestimmten Namen hat: Es wird für die symbolische ID verwendet.

Jetzt können wir unser Kunstboard als SVG mit der brandneuen "Datei → Export → Exportieren als Bildschirm" exportieren.

Dies ist ein wirklich nützliches neues Tool für die neueste Illustratorversion: Mit einem einzigen Befehl können Sie jede altafel oder benutzerdefinierte Ressource in mehreren Formaten speichern.

Wählen Sie aus dem Exportpanel "altboard" aus, setzen Sie "SVG" auf das Ausgabeformat und wählen Sie den Zielordner:

Jedes ARTboard wird als einzelne SVG -Datei exportiert:

Jetzt müssen wir alle Dateien in SVG -Symbole kombinieren und einige unerwünschte SVG -Eigenschaften entfernen: Ein kleines Schlupfskript hilft uns, dies schnell zu tun.

Verwenden von Gulp

Der nächste Abschnitt ist ein bisschen technisch, aber wenn Sie es vorziehen - erhalten Sie eine schnelle und prägnante Möglichkeit, ein so vielseitiges SVG zu generieren.

Ich habe auf SitePoint über Gulp geschrieben, und Sie können auch viele Ressourcen online über die Gulp -Installation und alle verwandten Parameter finden. Ich gehe davon aus, dass Sie es installiert haben und wissen, wovon wir sprechen.

Wenn Sie Gulp nicht mögen, können Sie auch alle folgenden Schritte manuell ausführen. Ich habe dies mehrmals gemacht, bevor ich mit Gulp angefangen habe: Es ist definitiv eine großartige Möglichkeit zu lernen, und es reicht aus kleinen Projekten oder Orten, an denen keine kontinuierliche Bearbeitung und Wartung erforderlich ist.

Also haben wir einige SVG -Dateien, die jeweils wie das folgende Beispiel angeordnet sind (D -Attribut wurde für die Bequemlichkeit verkürzt):

.top { fill: #356BA5; }
.right { fill: #357FD9; }
/* and so on... */

Unser Ziel ist es, alle Bilder in SVG -Symbole in einer einzelnen Datei zu ordnen, während alle unerwünschten Eigenschaften entfernt werden:

<svg xmlns="https://www.w3.org/2000/svg">
    <symbol id="top" viewBox="0 0 54 54">
        <polygon points="54 0 0 0 27 27 54 0"></polygon>
    </symbol>
    <symbol id="right" viewBox="0 0 54 54">
        <polygon points="54 54 54 0 27 27 54 54"></polygon>
    </symbol>
    <symbol id="bottom" viewBox="0 0 54 54">
        <polygon points="0 54 54 54 27 27 0 54"></polygon>
    </symbol>
    <symbol id="left" viewBox="0 0 54 54">
        <polygon points="0 0 0 54 27 27 0 0"></polygon>
    </symbol>
</svg>

außer Gulp erfordert unsere Arbeit einige andere Erweiterungen:

• Zunächst werden Gulp-SvGstore und Gulp-Svgmin verwendet, um unsere SVG-Dateien zu kombinieren und zu komprimieren
• Gulp-Rename wird verwendet, um den ID-Namen anzupassen und einen Namen für unsere Zieldatei anzugeben. Dieses Modul wird besonders benötigt, wenn Sie den vorherigen Illustrator SVG Exportbefehl verwenden möchten, den wir später abdecken werden.

Jetzt können wir unsere Schluckfile arrangieren (der Code kann auch als öffentlicher GIST erhalten werden):

<svg>
    <use class="top" xlink:href="#top"></use>
    <use class="right" xlink:href="#right"></use>
    <use class="bottom" xlink:href="#bottom"></use>
    <use class="left" xlink:href="#left"></use>
</svg>

Nach dem Laden des Moduls verweisen wir die Datei zum Analyse (SVG_FILES/*. SVG).

svGstore verwendet den Namen jeder Datei, um das Symbol -ID -Attribut festzulegen (d. H. Eine Datei namens Umbrella.svg wird zu einem Symbol mit id="umbrella"). Wenn Sie den neuen Illustrator -Export als Bildschirmpanel verwenden, können Sie den ersten -Ferbenverhältnis vermeiden, da Ihre Dateien genauso genannt werden wie die von ihnen gehörende Kunstkarte.

Aber die alte Version des Illustrators erstellt einen Dateinamen, indem der Illustrator -Dateiname mit dem Namen des Artiketts verbunden wird. Daher müssen wir die Datei umbenennen, um das Präfix des Illustrator -Dateinamens zu entfernen:

<svg id="Layer_1" data-name="Layer 1" xmlns="https://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54">
<title>umbrella-handle</title>
<path d="..." fill="#603813"></path>
</svg>

Jetzt können wir unsere Dateien reinigen. Gulp-Svgmin ist eine Gulp-Version von SVGO, "ein Tool, das auf NodeJS zur Optimierung von SVG-Vektorgrafikdateien basiert" (Jake Archibald hat eine Online-Version von SVGO veröffentlicht, die sehr nützlich ist, wenn Sie Dateien manuell arrangieren möchten).

svgo hat viele konfigurierbare Optionen (Sie können alle auf der Projektseite durchsuchen), aber wir benötigen nur ein paar (natürlich können Sie die Skripte anpassen, wie Sie möchten):

• Aufräumarbeiten: Entfernen Sie alle IDs aus der Datei
• entfernteCype, Removecommente und RemovestyleLeement: Entfernen Sie alle Deklarationen, Kommentare und <style></style> Elemente
• entfernte Dimensionen: Wenn ViewBox existiert, werden alle Breiten- und Höheneigenschaften
gelöscht
Aufräumarbeiten aufräumen: Rund um den Wert auf ein angemessenes Maß an Genauigkeit
• runden
removeAttrs: Entfernen Sie alle angegebenen Attribute

Geben Sie als nächstes die Datei an den SVGstore weiter, um zu einer eindeutigen Datei zu kombinieren, dann umzubenennen und zu speichern.

Nachdem Sie es ein paar Mal verwendet haben, sollten Sie es für jedes Projekt in wenigen Minuten planen können, und es ermöglicht es Ihnen, Ihre SVG -Symboldatei schnell wieder aufzubauen, wenn Sie sie benötigen.

Hier ist ein Ergebnisbeispiel (selbst in diesem Stift habe ich die SVG -Datei zur Bequemlichkeit eingebettet, aber Sie können sie sicher als externe Datei verknüpfen):

codePen Link 4

Gibt es eine Warnung?

Da diese Methode auf Elementen gestalteten Gebrauchsnutzung basiert, haben wir Probleme, wenn Polyfills (wie SVG4Everybody) sie löschen.

In Browsern, die externe symbolische Links (alle IES) nicht unterstützen, ersetzt SVG4Everybody

alle Verwendung von Elementen durch den Inhalt des passenden Symbols. Daher werden alle CSS -Regeln nicht wirksam.

Dies kann gelöst werden, indem der CSS -Selektor an interne symbolische Elemente (Pfad, Kreis usw.) angepasst wird. Dies kann jedoch etwas schwierig sein.

out bonus

Es gibt unbegrenzte Variationen dieses Workflows: Sie können Striche, Text und mehr umgehen.

Ein weiteres interessantes Merkmal, das es wert ist, erforscht zu werden, ist die Verwendung von Illustratorsymbolen: Sie werden als SVG -Symbole exportiert, was viele Möglichkeiten bringt.

Danke fürs Lesen.

Häufig gestellte Fragen zu angeschlossenen SVG -Symbolen

Was sind die Vorteile der Verwendung von SVG -Symbolen anstelle anderer Bildformate für Webdesign?

SVG -Symbole haben im Vergleich zu anderen Bildformaten wie JPEG, PNG oder GIF viele Vorteile. Erstens sind SVGs skalierbare Vektorgrafiken, was bedeutet, dass sie geändert werden können, ohne Qualität zu verlieren. Dies ist besonders nützlich für das reaktionsschnelle Webdesign, bei dem das gleiche Bild auf verschiedenen Geräten an verschiedenen Größen angezeigt werden muss. Zweitens können SVG -Symbole mit CSS gestylt werden, wodurch die Flexibilität des Designs verbessert wird. Schließlich ist die Dateigröße von SVG normalerweise kleiner als das Bitmap -Gegenstück, wodurch die Lade- und Verbesserung der Website -Leistung beschleunigt wird.

Wie modifizieren Sie die Farbe des SVG -Symbols?

Sie können CSS verwenden, um die Farbe des SVG -Symbols zu ändern. Standardmäßig erbt SVG die Farbe seines übergeordneten Elements. Sie können diese Einstellung jedoch überschreiben, indem Sie das SVG oder seine Kinderelemente in CSS positionieren und die gewünschte Farbe anwenden. Beispielsweise können Sie das Attribut fill verwenden, um die Farbe innerhalb des SVG zu ändern, oder das Attribut stroke verwenden, um die Farbe seiner Umrisse zu ändern.

Kann ich SVG -Symbole in allen Webbrowsern verwenden?

SVG -Symbole werden in allen modernen Webbrowsern, einschließlich Chrome, Firefox, Safari und Edge, häufig unterstützt. Ältere Versionen von Internet Explorer (IE8 und unten) unterstützen jedoch keine SVG. Wenn Sie diese älteren Browser unterstützen müssen, müssen Sie möglicherweise PNG- oder JPEG -Bilder als Fallback bereitstellen.

Wie kann man SVG -Symbole animieren?

SVG -Symbole können mit CSS -Animation oder JavaScript animiert werden. CSS -Animationen sind einfacher und können besser abschneiden, aber JavaScript bietet mehr Kontrolle und Flexibilität. Sie können verschiedene Eigenschaften eines SVG wie seine Position, Größe, Rotation, Farbe und Deckkraft animieren.

Kann ich SVG -Symbole in HTML verwenden?

Ja, SVG -Symbole können direkt in HTML eingebettet werden. Dies kann mit den Tags <svg></svg> und <symbol></symbol> durchgeführt werden. Das <symbol></symbol> -Tag wird verwendet, um das SVG -Symbol zu definieren, und das <use></use> -Tag wird verwendet, um es zu instanziieren. Auf diese Weise können Sie das SVG -Symbol gleichzeitig definieren und im gesamten HTML mehrmals wiederverwenden.

Wie kann ich meine SVG -Symbole zugänglicher machen?

Um Ihre SVG -Symbole zugänglicher zu machen, sollten Sie die Tags <title></title> und <desc></desc> im SVG verwenden, um alternativen Text bereitzustellen. Das <title></title> Tag bietet einen kurzen beschreibenden Titel für SVG und das <desc></desc> -Tag enthält eine längere Beschreibung. Diese Tags werden von Bildschirmlesern gelesen und bieten einen wichtigen Kontext für sehbehinderte Benutzer.

Kann ich SVG -Symbole in CSS verwenden?

Ja, das SVG -Symbol kann als Hintergrundbild in CSS verwendet werden. Dies kann durch Codieren des SVG als Daten -URL und der Verwendung des Werts des background-image -attributs erfolgen. Mit dieser Methode können Sie jedoch nicht das SVG mit CSS stylen oder animieren.

Wie optimieren Sie meine SVG -Symbole für die Leistung?

Es gibt verschiedene Möglichkeiten, Ihre SVG -Symbole für die Leistung zu optimieren. Zunächst können Sie den SVG -Code komprimieren, um die Dateigröße zu reduzieren. Zweitens können Sie die GZIP -Komprimierung verwenden, um die Dateigröße weiter zu reduzieren. Schließlich können Sie HTTP/2 verwenden, um Ihr SVG zu bedienen, was eine schnellere und effizientere Datenübertragung ermöglicht.

Kann ich SVG -Symbole in JavaScript verwenden?

Ja, SVG -Symbole können in JavaScript betrieben werden. Auf diese Weise können Sie die Eigenschaften des SVG dynamisch verändern, z. B. Farbe, Größe, Lage und Sichtbarkeit. Sie können JavaScript auch verwenden, um SVGs zu animieren, interaktive SVGs zu erstellen und SVGs dynamisch zu laden.

Wie erstellt ich reaktionsschnelle SVG -Symbole?

Um ein reaktionsschnelles SVG -Symbol zu erstellen, sollten Sie relative Einheiten (z. B. Prozentsätze) für die Breite und Höhe des SVG verwenden und nicht für absolute Einheiten (wie Pixel). Dadurch kann das SVG mit seinem übergeordneten Element skalieren. Sie können auch das Attribut viewBox verwenden, um das Seitenverhältnis und das Koordinatensystem des SVG anzugeben, wodurch es skaliert wird.

Das obige ist der detaillierte Inhalt von'Resknable' SVG -Symbole: Wie man sie macht (..und warum). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!