svg in web pages

2.1 Including SVG as an <img> element

<img src="cat.svg" alt="A cat's head with whiskers"/>

2.2 Including SVG in CSS as a background-image

<style>
   div.cats {
       width: 400px;
       height: 300px;
       background-image: url(cat.svg);
        /* width height */
       background-size: 100px 100px; 
       /* option: no-repeat */
       background-repeat: repeat;
   }
</style>

<div class="cats"></div>Key properties:
background-size: 100px 100px; — sets width and height of the background image
background-size: 50%; — scales to percentage of container
background-size: contain; — fits entire image inside container
background-size: cover; — covers entire container (may crop)
background-repeat: no-repeat; — shows image once instead of tiling
background-position: center; — positions the image (e.g., center, top left, 50% 50%)

2.3 Including SVG in <object> element

<object data="cat.svg" type="image/svg+xml"
        title="Cat Object" alt="Stick Figure of a Cat" >
        <!-- As a fallback, include text or a raster image file -->
        <p>No SVG support! Here's a substitute:</p>
        <img src="cat.png" title="Cat Fallback"
        alt="A raster rendering of a Stick Figure of a Cat" />
</object>

2.3 Including SVG inline

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 
   <title>Cat</title>
   <desc>Stick Figure of a Cat</desc>
   <!-- head -->
   <circle cx="100" cy="95" r="50" style="stroke:black; fill:none"/>
   <!-- eyes -->
   <circle cx="80" cy="75" r="5" style="stroke:black; fill:#00aa00"/>
   <circle cx="120" cy="75" r="5" style="stroke:black; fill:#00aa00"/>
   <!-- whiskers -->
   <!-- groupink to right whiskers -->
   <g id="whiskers">
      <line x1="100" y1="100" x2="20"  y2="90" style="stroke:black; fill:none"/>
      <line x1="100" y1="100" x2="20"  y2="110" style="stroke:black; fill:none"/>
   </g>
   <!-- reflect the group  -->
   <use xlink:href="#whiskers"  transform="translate(200,0) scale(-1,1) "/>
   <!-- ears -->
   <polyline points="65 60, 80 5, 100 45, 120 5, 135 60" style="stroke:black; fill:none"/>
   <!-- mouth -->
   <polyline points="70 120, 80 130, 120 130, 130 120" style="stroke:black; fill:none"/>
   <!-- nose -->
   <path d="M 105 95 L95 95 A 5 10 0  0 0 105 95" style="stroke:black; fill:#ffcccc" />
   <!-- description -->
   <text x="85" y="170" style="font-family:sans-serif; font-size:14pt; stroke: none; fill:black">
      Cat
   </text>
</svg>

2. Using SVG in Web Pages