Depot43-Unterlagen - SVG Image Fallback

HTML Elemente

            
<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>SVG-Animation - SVG Image Fallback</title>
    <style>
img.affe {max-width:200px;}
    </style>
</head>
    <body>
	<p>In einem alten Browser testen, um zu sehen wie die als "Fallback" definierte PND-Datei, anstelle der SVG-Datei geladen wird.</p>
	<img class="affe" src="http://depot43.ch/unterlagen/assets/svg/fallback/affe.svg" alt="SVG oder PNG" onerror="this.onerror=null; this.src='http://depot43.ch/unterlagen/assets/svg/fallback/affe.png'">
    </body>
</html>

Hinweis

Eine SVG-Datei kann wie ein Pixelbild über das "img"-Element eingelinkt werden. Das macht den HTML-Code übersichtlicher, da der gesamte SVG-Code in der externen Datei liegt.

Download: rot.svg

Download: rot-affinity.afdesign

Es kann aber nur auf das umgebende Elternelement (bsp. img) mit CSS zugegriffen werden.