Inline SVG markup

Mind necessity to keep XML syntax for all SVG markup

 …
 <h2>Some Title</h2>
  <div class="wrapper">
   
   <svg width="80" height="80" xmlns="http://www.w3.org/2000/svg">
     <circle cx="40" cy="40" r="35" fill="orange"/>
     <line x1="0" y1="0" x2="80" y2="50" stroke="green" stroke-width="4"/>
   </svg>
   <script>
     if (!document.implementation.hasFeature(
           "http://www.w3.org/TR/SVG11/feature#Shape", "1.1")) {
       // optional fallback here
     }
   </script>
  </div>
 <p>Some text…</p>
 …                      

Advantages

• owner's document CSS applicable
• manipulable via JavaScript
• no extra file to load

Disadvantages

• not cacheable
• cross-browser (MSIE) fluid size trick needed

Fluid design MSIE trick

Use if stretching is needed; fixed size works OK Live demo

    <style>
      .wrapper {
          width: 50%;
          height: 0;
          padding-top: 50%; /* (svg-height / svg-width) * wrapper-width */
          position: relative;
      }
      svg {
          position: absolute;
          top: 0;
          left: 0;
      }
    </style>
    <div class="wrapper">  
      <svg viewBox="0 0 50 50"></svg>
    </div>           

Object tag integration

  …
  <h2>Some Title</h2>

  <object type="image/svg+xml" data="turtle.svg" width="323" height="153">
      
  </object>

  <p>Some paragraph…</p>
    …
                        

Advantages

• CSS from external stylesheet works
• manipulable via JavaScript (externally & internally)
• cacheable
• intensive pre-compress possible (.svgz)

Disadvantages

• owner document CSS not applicable
• cross-browser (MSIE) fluid size trick needed

Fluid design MSIE trick

Setting width does the trick. Live demo

    <style>
      .wrapper {
          width: 50%;
      }
      .wrapper object {
          width: 100%;
      }
    </style>
    
    <div class="wrapper">  
      <object type="image/svg+xml" data="turtle.svg"></object>
    </div>           

Image tag integration

Good, old and familiar way to go…

    <img src="svg/dog.svg" alt="Dog" width="136" height="200"
        onerror="this.onerror=null; this.src='fallback.png'"/>
    <!-- with possible fallback using onerror attribute -->
                        

Advantages

• cacheable and performant (pre-rendering)
• safe and simple (sandboxed)
• SMIL allowed (animated GIF substitute)
• pre-compressing possible

Disadvantages

• CSS from outside not applicable
• no JavaScript manipulation
• interactivity disabled (links, DOM events)

Fluid design MSIE trick

The same width trick like in object tag case. Live demo

    <style>
      img {
          width: 100%;
      }
    </style>
    
    <img width="323" height="153" src="svg/dog.svg" alt="Dog"/>
                        

CSS background image

    <style>
      .holder {
        width: 50%;
        height: 50%;
        background: url('img/turtle.png'); /* possible fallback trick */
        background-image: url(svg/fish.svg), none;
      }
    </style>
    
    <div class="holder"/>

Advantages

• no tricks needed for modern browsers
• cacheable, pre-compressible and performant
• sandboxed with SMIL allowed

Disadvantages

• the same like in img tag case

Line Drawing - script

MSIE compatible solution, DOM manipulation involved.

  <svg>
    <path id="drawMe" d="M 246,188 l3,12h2l5-6c0,4,1,6,5,7,3-5,8-2…"/>
    <script>
      var line = document.getElementById("drawMe");
      lineElem.style.strokeDasharray = line.getTotalLength();
      lineElem.style.strokeDashoffset = line.getTotalLength();

      // animation cycle follows
      window.requestAnimationFrame(…shift strokeDashoffset here…);
    </script>
  <svg>              

Line Drawing - SMIL

Synchronized Multimedia Integration Language solution.

  <svg>
    <path stroke-dasharray="1439" stroke-dashoffset="1439" d="M 246,188…">
      <animate attributeName="stroke-dashoffset" from="1439" to="0" 
        dur="4s" repeatCount="1" fill="freeze"/>
    </path>
  <svg>              

Line Drawing - CSS

Don't forget to add necessary prefixes (like -webkit-…)

 <svg>
   <style>
     .animate {
       animation: draw 4s linear 1 forwards;
     }
     @keyframes draw {
       100% {
         stroke-dashoffset: 0;
       }
     }
   </style>
   <path stroke-dasharray="1439" stroke-dashoffset="1439" d="M 246,188…"/>
 <svg>