SVG-Grafiken für Website

Ich habe noch eine sicherlich dumme Frage, bei der ich auf Hilfe gehofft hatte. Traditionell komme ich aus einem eher Printmedien-Hintergrund, aber ich versuche derzeit, meine Website über WordPress zu erstellen, und bin auf ein paar Probleme gestoßen. Der wichtigste versucht, eine .svg-Datei auf meiner Website zu verwenden.

Ich habe das Plugin „SVG Support“ installiert, mit dem ich die Dateien hochladen kann. Mein Problem war jedoch, die Größe der Datei bei der Anzeige zu definieren. Mir ist klar, dass eine SVG-Datei keine Bilddatei ist, sondern ein Dokument, und es im Illustrator nicht wirklich wichtig ist, eine bestimmte Größe zu erreichen, da es sich um einen Vektor und nicht um ein Raster handelt und gut skaliert werden kann. Aber ich versuche herauszufinden, wie ich dann definiere, in welcher Größe die Datei auf der Webseite angezeigt werden soll.

Ich bin durch ein tiefes dunkles Kaninchenloch von Artikel zu Artikel gegangen und habe mich dabei selbst gründlich verwirrt. Einige Artikel haben CSS-Code vorgeschlagen, das schien bei mir nicht zu funktionieren (obwohl ich es hätte falsch machen können). Soweit ich das beurteilen kann, scheinen die meisten Artikel jedoch vorzuschlagen, ein Programm namens "Inkscape" herunterzuladen und die Größe der Datei in einer "Viewbox" zu definieren. Und ich bin wie "Was zum Teufel ist eine Viewbox?!" und ist das etwas, was ich nur in Illustrator machen könnte? Lol

Am Ende des Tages möchte ich nur .svg-Grafiken haben, die sich proportional skalieren lassen. Hat jemand irgendwelche Vorschläge, wie sie .svg-Dateien auf ihrer Website verwenden? Vielen Dank für Ihre Zeit, ich schätze die Hilfe.

Viewbox: ist die Größe der Zeichenfläche.
Könnten Sie erläutern, wie Sie das SVG verwenden? Als Hintergrundbild? als <img>oder <svg>direkt mit dem Code?

Antworten (1)

Um es einfach zu halten, können Sie die .svg-Dateien auf WordPress hochladen und sie in Ihren HTML-Code einfügen, genau wie andere Bildformate wie:

<img src="img/demo.svg" width="200" height="200">

ODER

<img src="img/demo.svg" style="width: 200px; height: 200px;">

ODER

<img src="img/demo.svg" class="demo">

.demo{
width:200px;
height: 200px;
}

ein wenig Hilfe von hier: https://css-tricks.com/using-svg/

Sie können die SVG-Dateien auch als SVG-Sprite verwenden: https://css-tricks.com/svg-sprites-use-better-icon-fonts/

Super vielen Dank, und die Links waren sehr informativ. Solange ich die Breite und Höhe anfangs auf die richtigen Proportionen einstelle, wird die Grafik in diesen Proportionen auf mehreren Geräten und Displays skaliert?
Ja, das SVG fungiert als Bild und die Handhabung der Breite und Höhe von CSS ermöglicht es Ihnen, die Proportionen festzulegen. Bei Problemen auf mehreren Geräten müssen Sie Medienabfragen verwenden, um das Bild wie jedes Rasterbild anzupassen