SVG как встроенный объект

Различные способы встраивания SVG в HTML-документ

Применение <object>:
Ваш браузер не может отображать SVG-изображения.

Применение <embed>:

Встраивание в HTML-код посредством тега <svg>:
Выше приведен пример трех вариантов встраивания SVG в HTML-документ:

  1. посредством тега <object>(вставка файла example0.svg с двумя полупрозрачными кругами);
  2. посредством тега <embed>(вставка того же файла example0.svg) ;
  3. посредством тега <svg> (в HTML 5).

    HTML-код примера

    <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
"http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>SVG как встроенный объект</title>
</head>
<body>
<h1>Различные способы встраивания SVG в HTML-документ</h1>
<h5>Применение <object></h5>
<object  data="example0.svg" type="image/svg+xml"
            width="100" height="100">
Ваш браузер не может отображать SVG-изображения.
</object>
<h5>Применение <embed></h5>
<embed src="example0.svg" type="image/svg+xml"
          width="100" height="100"/>
<h5>Встраивание посредством тега <svg></h5>
 <svg>
   /* здесь располагается SVG-код */
 </svg>
</body>
</html>

    SVG-файл (example0.svg)

    <?xml version="1.0" encoding="utf-8"?>
<svg version = "1.1"
     baseProfile="full"
     xmlns = "http://www.w3.org/2000/svg" 
     xmlns:xlink = "http://www.w3.org/1999/xlink"
     xmlns:ev = "http://www.w3.org/2001/xml-events"
     height = "100px"  width = "100px">
     <rect x="0" y="0" width="100" height="100" 
          fill="none" stroke="black"
          stroke-width="3px" stroke-opacity="0.5"/>
     <g fill-opacity="0.6" stroke="black" stroke-width="0.5px">
        <circle cx="40px" cy="50px" r="30px" fill="red"
                transform="translate(  0,-15)" />
        <circle cx="40px" cy="50px" r="30px" fill="blue"
                transform="translate( 25, 15)" />
     </g>
</svg>