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!