<svg 

         version="1.1" 
         width="" 
         height="" 
         viewBox="min-x min-y width height"
         xmlns="http://www.w3.org/2000/svg">

    </svg> 

1. SVG is an XML language, similar to XHTML, which can be used to draw vector graphics
2. SVG provides elements for circles, rectangles, and simple and complex curves
3. A simple SVG document consists of nothing more than the svg root element and several basic shapes that build a graphic together
4. In addition, there is the g element, which is used to group several basic shapes together
5. SVG elements and attributes are case-sensitive
6. Attribute values in SVG must be placed inside quotes, even if they are numbers
7. The globally valid rule for SVG files is that later elements are rendered atop previous elements
8. The further down an element is the more it will be visible
9. SVG files on the web can be displayed directly in the browser or embedded in HTML files via several methods
   1. The SVG can be directly embedded in HTML
   2. An img element can be used
   3. The SVG file can be referenced with an object element:
      

      <object 
        data="image.svg" 
        typemustmatch="True"
        type="image/svg+xml">
      </object>
      

   4. Note that object takes the data attribute
10. comments in svg

Notes

1. Note that decreasing the width value to half that specified in the svg file (svg_example_four.svg; see object example for full code) does not truncate the image

2. <img width = "150" … >
   <svg width = "300" … > 

3. Contrast with the object examples below

<img 
    src="../svg/svg_example_four.svg" 
    alt="Hello World Image" 
    height="75" 
    width="150" /> 

Example (Object, truncate problem)

<object 
    data="../svg/svg_example_four.svg" 
    type="image/svg+xml" 
    width="150" >
</object> 

// svg_example_four.svg 
<svg version= "1.1" 

     width = "300"
     height = "150"
     xmlns = "http://www.w3.org/2000/svg">

    <!--outer rectangle-->
    <rect  width="100%" height="100%" fill="lightgoldenrodyellow" />

    <!--Hello-->
    <text x="20" 
          y="50" 
          style="stroke:green;fill:none; 
                 font-size:50px; 
                 font-family:serif;">
        Hello
    </text>

    <!--World-->
    <text x="80" 
             y="120" 
             style="stroke:none;
                    fill:red; 
                    font-size:50px; 
                    font-family:serif;">
        World
    </text>
</svg> 

Example (Object, fix problem)

<div>
    <object data="../svg/svg_example_four_2.svg" type="image/svg+xml"
        typemustmatch="True"></object>
</div>
                                

<svg version= "1.1" 

     width = "150"
     height = "75"
     viewBox = "0 0 300 150"
     xmlns = "http://www.w3.org/2000/svg">

    <!--outer rectangle-->
    <rect  width="100%" height="100%" fill="lightgoldenrodyellow" />

    <!--Hello-->
    <text x="20" y="50" 
        style="stroke:green;fill:none; 
        font-size:50px; 
        font-family:serif;">Hello</text>

    <!--World-->
    <text x="80" y="120" 
        style="stroke:none;fill:red; 
        font-size:50px; 
        font-family:serif;">World</text>

</svg> 

Example (Embed in HTML)

<svg version="1.1" width="150" height="75" viewBox="0 0 300 150"
    xmlns="http://www.w3.org/2000/svg">

    <!--outer rectangle-->
    <rect width="100%" height="100%" fill="lightgoldenrodyellow" />

    <!--Hello-->
    <text x="20" y="50">Hello</text>

    <!--World-->
    <text x="80" y="120">World</text>
</svg> 

svg text {
    fill: red;
    font-size: calc(50em / 16);
    font-family: serif;
}

svg text:first-of-type {
    stroke: green;
    fill: none;
} 

References