SVG-Tutorial

SVG-Elemente

SVG im Web anzeigen

SVG kann in Webbrowsern (z.B. Chrome, Firefox und Internet Explorer) angezeigt werden, indem auf die URL der SVG-Datei verwiesen wird, SVG in die HTML-Seite eingebettet wird, das iframe-Element verwendet wird, das img-Element verwendet wird und andere Methoden.

SVG kann in Webbrowsern (z.B. Chrome, Firefox und Internet Explorer) auf folgende Weise angezeigt werden:

Der Browser zeigt SVG-Bilder an, indem er auf die URL der SVG-Datei verweist.
SVG in HTML-Seite einbetten

SVG-Bilder können in HTML-Dateien auf folgende Weise eingebettet werden:

Verwenden Sie das iframe-Element
Verwenden Sie das img-Element
Verwenden Sie SVG-Bilder als Hintergrundbilder.
Verwenden Sie svg-Elemente
Verwenden Sie eingebaute Elemente

iframe-Frames

Wenn Sie die URL des SVG-Bildes eingeben, da Browser SVG-Bilder anzeigen können, können Sie dies auch verwenden, um SVG-Bilder in einem iframe der HTML-Seite zu enthalten. Hier ist ein Beispiel:

<iframe src="mySvgImage.svg" width="200"　height="200">

img

img ähnelt dem Verwenden jeder anderen Art von Bild, daher ist das Einfügen von SVG-Bildern mit Elementen ebenfalls so. Sie können die URL des SVG-Bildes im src-Attribut des img-Elements eingeben, wie folgt:

<img　src="/svg/circle-element-1.jsp">

SVG-Bilder werden wie andere Bilder auf der HTML-Seite angezeigt.

SVG als Hintergrundbild

Da Browser SVG-Bilder wie Bitmap-Bilder behandeln, können Sie SVG-Bilder als Hintergrundbilder mit CSS verwenden. Hier ist ein Beispiel:

div　{
　　　　background-image:　url('my-svg-image.svg');
　　　　background-size　:　100px　100px;
}

Es kann erforderlich sein, die Größe des SVG-Bildes zu konfigurieren, um dem Browser zu sagen, wie es skaliert werden soll. Sie können dies in meinemCSS-Tutorial für Hintergrundbilderfür mehr Informationen über Hintergrundbilder.

SVG-Elemente im HTML

Die Einbettung von SVG-Bildern mit SVG-Elementen kann direkt in der HTML-Seite erfolgen, wie folgt gezeigt:

<div><svg>
　　　　<circle　cx="40"　cy="40"　r="24"　style="stroke:#006600;　fill:#00cc00"/>
　　　　</svg></div>

Das div-Element hier dient nur dazu, zu erklären, dass svg-Elemente direkt in die HTML eingefügt werden können. Es ist jedoch nicht erforderlich, svg-Elemente in ein div-Element einzufügen.

Mit dem SVG-Element können Sie SVG direkt in die HTML-Seite einbetten, anstatt SVG-Bilder in eigenen Dateien zu platzieren. Sie können die Breite und Höhe des SVG-Bildes durch das Hinzufügen der Breite und Höhe der svg-Elemente als Attribute einstellen.

Durch die Verwendung des svg-Elements können Sie SVG auch direkt im Browser mit JavaScript generieren.3 Der JavaScript API ist darin sehr geschickt. Auch der jQuery JavaScript API gelingt das.

Mit dem svg-Element können Sie auch CSS zur Formatierung von SVG und seinen Unterlementen verwenden, wie Sie es mit jedem anderen HTML tun. Beachten Sie, dass die Namen einiger CSS-Attribute von SVG-Elementen manchmal von den Namen von HTML-Elementen abweichen.

embed

In den frühen Tagen von SVG konnten Sie SVG-Bilder mit dem Embed-Element einbetten. Damals unterstützten nicht alle Browser SVG. Heute empfehle ich die Verwendung von img- oder svg-Elementen. Hier ist ein Beispiel für ein eingebettetes Element, das die historischen Gründe zeigt:

<embed　src="/svg/simple-example-1.jsp"
　　　　　　　width="300"　height="220"
　　　　　　　type="image"/svg+xml"
　　　　　　　pluginspage="http://www.adobe.com/svg/viewer/install/"　/>

Legen Sie diesen Element in die Stelle im HTML-Dokument ein, wo das SVG-Bild angezeigt werden soll. Die src-Attribut sollte auf die URL des SVG-Bildes verweisen.

Bitte beachten Sie das pluginspage-Attribut. Dies ist für alte Browser erforderlich, die SVG nicht nativ anzeigen können. Diese Browser benötigen den Adobe SVG-Browser-Plugin, um Bilder anzuzeigen. In Internet Explorer 7und Firefox 3.0.5in der Regel ist dieses Attribut nicht erforderlich, aber es schadet auch nicht, es zu enthalten.

Breite und Höhe-Attribute

Unabhängig davon, ob Sie das img-, svg- oder embed-Element verwenden, um SVG-Bilder einzubinden, können Sie die width- und height-Attribute verwenden, um die Breite und Höhe des Bildes zu setzen. Wenn das Bild im SVG-Datei als breiter oder höher ist als diese Werte, wird nur ein Teil des SVG-Bildes angezeigt. Stellen Sie sicher, dass die festgelegten Breite und Höhe groß genug sind, um das gesamte SVG-Bild (oder die gewünschte Breite) anzuzeigen.

SVG als Hintergrundbild von HTML-Elementen verwenden

CSS-Background kann verwendet werden-Das image-Attribut nutzt SVG-Bilder als Hintergrundbilder von HTML-Elementen. Es reicht aus, wie auf jede andere Bilddatei zu verweisen, auf die SVG-Bilddatei. Nicht alle Browser unterstützen dies vollständig, testen Sie dies in den Browsern, die Sie unterstützen möchten. Hier ist ein Beispiel:

.myCSSClass {
　　　　background: url(/mySvgImage.svg);
}

Browser-Kompatibilität

Internet Explorer 9und späteren Versionen können SVG nativ anzeigen. Zum Zeitpunkt der Erstellung dieses Artikels konnten Firefox, Chrome, Safari, Opera und Android-Browser SVG bereits nativ anzeigen. Auch die iOS-Version von Safari, die Mini- und mobilen Browser von Opera sowie die Chrome-Version für Android können dies tun.

Content-Type

Wenn Sie die URL des Browsers auf eine mit .svg endende Datei verweisen, kann der Browser den mime-Typ der SVG-Datei erraten. Aber wenn SVG von Servlets, JSP, PHP, ASP.NET-Seiten oder anderen Webanwendungskomponenten generiert wird, endet die URL nicht immer mit .svg.
Um zu gewährleisten, dass der Browser die Datei dennoch als SVG-Datei interpretiert, müssen Sie den Content-HTTP-Header-Typ

image/svg+xml

Wenn Sie den vorherigen <embed>-Element überprüfen, werden Sie feststellen, dass dies auch im type-Attribut so geschieht. Die Angabe des Inhaltstyps im <embed>-Element ist für Internet Explorer ausreichend, aber für Firefox noch nicht. Es muss auch im Inhaltstyp der HTTP-Antwort angegeben werden.

Darüber hinaus, wenn Sie den Browser direkt auf die SVG-Datei auf dem Server verweisen, gibt es keinen <embed>-Tag, der dies für Sie ausführen kann. Dann müssen Sie den Inhaltstyp selbst in der HTTP-Antwort einstellen.
Dies ist die Methode, um dies in JSP zu erreichen:

<%　response.setContentType("image/svg+xml");%>
<svg　...　>

Dies ist sehr ähnlich wie die Ausführung in Servlets. Wenn Sie eine andere als Java-Technologie verwenden, suchen Sie einfach nach Beispielen, wie man den Inhaltstyp in einer HTTP-Antwort einstellt, indem Sie Google durchsuchen. Es gibt viele Beispiele.

SVG-Icon Einfaches SVG-Beispiel