SVG Symbol

SVG-Symbole sind SVG-Bilder, die als Symbole oder Bildschaltflächen in Webanwendungen oder mobilen Anwendungen verwendet werden. SVG-Symbole können auch für Logos verwendet werden. Dieses SVG-Symbol-Tutorial erläutert, wie man eigene SVG-Symbole erstellt und wo man hochwertige vorab erstellte SVG-Symbole herunterladen kann.

Vorteile von SVG-Symbolen

Der Vorteil von SVG-Symbolen ist, dass sie leicht proportional vergrößert oder verkleinert werden können, abhängig von der Position, an der sie im Anwendungsfenster angezeigt werden, und der Größe des Bildschirms der Anwendung. SVG-Symbole haben den Vorteil über Bitmap-Grafiken, dass sie bei proportionaler Vergrößerung oder Verkleinerung immer noch gut aussehen. Bitmap-Grafiken neigen dazu, bei Vergrößerung pixelig zu werden und bei Verkleinerung an Qualität zu verlieren (Pixel).

SVG-Symbole in Web Apps zu verwenden

Wie bereits erwähnt, gibt es mehrere Methoden, um SVG in Webbrowser zuim WebbrowserSVG wird im Rahmen einer HTML-Seite angezeigt.　Allerdings ist es am einfachsten, ein SVG-Symbol mit dem HTML img-Element anzuzeigen, da das HTML img-Element das Vergrößern und Verkleinern des SVG-Symbols leicht ermöglicht.

Dies ist ein Beispiel für das Element, das das SVG-Symbol anzeigt:

<img src="svg-icon.svg">

Um die Größe des SVG-Symbols zu vergrößern oder zu verkleinern, verwenden Sie einfach die CSS-Stylesätze width oder height. Hier ist ein Beispiel für ein img-Element, das die CSS Height Style-Eigenschaft hinzugefügt hat:

<img src="svg-icon.svg" style="height:32px">

Um die Seitenverhältnisse des SVG-Symbols bei Vergrößerung oder Verkleinerung beizubehalten, sollte nur einer der Werte für width oder height - Es kann nicht gleichzeitig这两个值设置。Wenn nur einer der Werte für die Breite eines Attributes gesetzt wird, skaliert der Browser das SVG-Symbol entlang der anderen Achse, um sicherzustellen, dass das SVG-Symbol seinen Seitenverhältnissen beibehält.

Erstellen Sie Ihre eigenen SVG-Symbole

Manchmal müssen Sie möglicherweise Ihre eigenen SVG-Symbole erstellen. Ein SVG-Symbol ist ein SVG-Bild, das in einem eigenen SVG-Datei enthalten ist. Hier ist ein sehr einfaches kreisförmiges Symbol, das aus einem SVG circle-Element besteht:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink="
　　　　<circle　cx="64"　cy="64"　r="64"　style="fill:　#00ccff;"></circle>
</svg>

Hier ist das Erscheinungsbild dieses SVG-Symbols, wenn es zusammen mit dem img-Element angezeigt wird:

Wenn Sie jedoch das SVG-Symbol mit dem img-Element anzeigen und die Größe des img-Elements vergrößern oder verkleinern, wird das SVG-Symbol nicht vergrößert oder verkleinert. Stattdessen wird或多或少 das SVG-Kanvas angezeigt. Hier ist ein Beispiel, bei dem die CSS Height-Eigenschaft von img auf32Ein Beispiel ist:

Bitte beachten Sie, dass nur ein Teil des Kreises angezeigt wird, und nicht der gesamte Kreis in proportionaler Größenveränderung.

Der Grund für dieses Problem ist, dass die SVG-Bilddatei bestimmte Informationen fehlt. Sie müssen einen Wert für das SVG viewBox-Attribut festlegen. Das viewBox-Attribut von SVG gibt an, wie viel des SVG-Kanvases (in der X- und Y-Richtung) angezeigt werden soll.

In unserem Beispiel möchten wir nur den Teil des SVG-Kanvases mit dem Symbol in Form eines Kreises anzeigen. Dieser Bereich erstreckt sich von dem Punkt 0,0 bis zum Punkt128,}128（Der Radius des Kreises beträgt64，mit64，64als Mittelpunkt）。 Mit dem SVG Viewbox-Attribut können wir nur diesen Bereich des SVG-Bildschirms rendern. Hier ist das Aussehen des SVG-Kreis-Symbols mit gesetztem Viewbox-Wert:

<svg　xmlns="http://www.w3.org/2000/svg"　　xmlns:xlink="http://www.w3.org/1999/xlink"　　viewBox="0　0　128　128">
　　　　<circle　cx="64"　cy="64"　r="64"　style="fill:　#00ccff;"></circle>
</svg>

Dies ist das angezeigte SVG-Symbol, die Höhe beträgt32、48und64Pixel: