Depot43-Unterlagen - SVG in HTML

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>SVG-Animation - SVG in HTML</title>
    <style>
		svg {max-width:200px;}
    </style>
</head>
    <body>
	<h1>SVG Start</h1>
	<svg width="100%" height="100%" viewBox="0 0 224 226" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
		<rect id="ArtBoard1" x="0" y="0" width="223.964" height="225.444" style="fill:none;"/>
		<circle cx="113.905" cy="111.538" r="100" style="fill:#f00;"/>
	</svg>
    </body>
</html>


 

            

Hinweis

Beispieldatei wurde mit Affinity Designer erstellt. Je nach Vektorprogramm kann der Kopf der Datei variieren. Wenn das SVG-Element direkt in eine HTML-Datei eingfügt wird, ist der HTML-Doctype bereits vorhanden.

Download: rot.svg

Download: rot-affinity.afdesign

Der Doctype innerhalb der SVG-Datei enfällt:

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Das SVG-Element wird in die HTML-Datei kopiert:

<svg width="100%" height="100%" viewBox="0 0 224 226" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
    <rect id="ArtBoard1" x="0" y="0" width="223.964" height="225.444" style="fill:none;"/>
    <circle cx="113.905" cy="111.538" r="100" style="fill:#f00;"/>
</svg>

In diesem Fall, ist Breite und Höhe in der SVG-Datei auf jeweils 100% gesetzt. Mit CSS lässt sich das beinflussen.

Mit der CSS-Eigenschaft "max-width" wird die maximale Ausdehnung festegelegt.

Der SVG-Inhalt kann aber weiterhin in die Richtung kleiner skalieren.