CodePen

HTML

            
              <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<rect x="314" y="89" width="250" height="158"/>
<circle class="stroke" cx="553" cy="241" r="68"/>
<circle cx="314" cy="157" r="68"/>
<polyline points="206.794,352.189 241.083,427.637 631.769,395.559 670.822,309.072 "/>
<text transform="matrix(0.9957 -0.0926 0.0926 0.9957 260.4678 399.3389)">SVG FOR THE WEB</text>
</svg>
            
          
!

CSS

            
              rect {
  fill: #AD6F6F;
}
circle {
  fill: #6F9FAA;
}
.stroke {
  stroke: #547178;
  stroke-width: 5px;
  stroke-opacity: 0.5;
}
polyline {
  fill: #6FA86F;
}
text {
  fill: #383838 ;
  font-family: 'Pacifico-Regular', arial, sans-serif;
  font-size: 35px;
  transition: all 1s ease;
}  
text:hover {
  font-size: 40px;
  kerning: 2px;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................