it-swarm.com.de

Wie verwende ich .svg-Dateien auf einer Webseite?

Ich möchte wissen, wie man eine .svg-Datei auf einer Webseite verwenden kann.

55
Parastar

Siehe svgweb quickstart und svgweb project homepage für etwas, das in allen Browsern funktioniert, einschließlich IE (erfordert Flash-Plugin).

Es gibt viele Möglichkeiten, eine vorhandene SVG-Datei einzuschließen:

  • <img src="your.svg"/>
  • <object data="your.svg"/>
  • <iframe src="your.svg"/>
  • <embed src="your.svg"/>
  • <div style="background:url(your.svg)">...</div>
46
Erik Dahlström

Wenn Sie lediglich ein SVG-Bild wie ein Logo oder ein statisches Diagramm platzieren möchten, müssen Sie lediglich darauf achten, ältere Versionen von Internet Explorer (d. H. Versionen 8 und früher) als Ersatz zu verwenden.

Die beste und einfachste Methode, die ich gefunden habe, ist die Verwendung einer .png- oder .jpg-Datei für Ihr Fallback, die mit einem normalen img-Tag platziert wird. Anschließend wickeln Sie das img-Tag in ein Objekt-Tag ein und platzieren das SVG mithilfe des data-Attributs.

<object data="/path-to/your-svg-image.svg" type="image/svg+xml">
  <img src="/path-to/your-fallback-image.png" />
</object>

Das img-Fallback wird nur geladen und verwendet, wenn der Browser SVG nicht versteht.

20
Caspar

http://www.w3schools.com/svg/svg_inhtml.asp

Das beste Beispiel:

<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.Adobe.com/svg/viewer/install/" /> 
5
Brian McKenna

Ich empfehle, das SVG in Ihr Dokument einzufügen (HTML5-Technik). Öffnen Sie einfach Ihre SVG-Datei, kopieren Sie das SVG-Tag und alles darin und fügen Sie es in Ihr HTML-Dokument ein.

<html>
    <body>
        <svg></svg>
    </body>
</html>

Dies hat den Vorteil, dass Sie CSS zum Stylen verwenden können, z. B. um die Füllfarbe zu ändern oder Filter wie Unschärfe darauf anzuwenden. Ein weiterer Vorteil ist, dass Sie eine http-Anforderung zum Abrufen der SVG-Datei speichern, wenn sie sich in Ihrem Dokument befindet.

Wenn Sie beispielsweise die Position mithilfe von CSS ändern möchten, müssen Sie das CSS in ein Style-Attribut einfügen. Stile, die sich in einer externen CSS-Datei befinden, werden in den meisten Browsern nicht angewendet, da dies eine Sicherheitsbeschränkung darstellt. Beispielsweise:

<svg id="mySVG" style="position: absolute; top: 200px; left: 200px;"></svg>

Diese Technik wird von allen Browsern mit Ausnahme von IE8 und darunter sowie dem Android 2.3-Browser und darunter unterstützt.

Lesen Sie das Kapitel Inline-SVG für weitere Details:

Wenn Sie es nicht in Ihre Seite einfügen möchten, ist das Objekt-Tag anscheinend die beste Alternative. Vermeiden Sie es, das Einbettungs-Tag zu verwenden.

Weitere Informationen zum Tag object vs embed vs img finden Sie hier:

3
chrisweb

Raphaël - JavaScript-Bibliothek . Schöne Javascript-Bibliothek, die Svg verwendet und Ihnen eine große Auswahl an Effekten bietet!

Unterstützt auch die meisten Browser, einschließlich IE

2
code-zoop

Caspars Ansatz ist der richtige. Allerdings würde ich den Fallback auf das CSS verschieben, da Sie wahrscheinlich einige Stile auf die SVG-Datei selbst anwenden möchten ...

<object data="/path-to/your-svg-image.svg" type="image/svg+xml"  class="logo"> </object>

CSS

.no-svg .logo {
  width: 99px;
  height: 99px;
  background-image: url(/path-to/your-png-image.png);
}`
2
Jerome

Ich möchte der Antwort von "code-zoop" zustimmen. Obwohl dies Ihre Frage technisch nicht beantwortet, könnte es auch eine Lösung sein: Geben Sie die relevanten Daten direkt in den HTML-Code ein. Entweder direkt als SVG-Element oder mit Raphaël-JS.

Aus w3c-Schulen:

SVG wird in Firefox, Internet Explorer 9, Google Chrome, Opera und Safari unterstützt

<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

</body>
</html>

(Ende des Zitats)

Und um noch mehr über den Tellerrand hinaus zu denken, können Sie Ihre einfarbigen Grafiken auch in ein Webfont einfügen, je nachdem, wie Sie sie verwenden möchten. (siehe zum Beispiel iconmoon.io)

1
Ideogram