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>