HTML : SVG
In HTML5, you can embed SVG elements directly into your HTML pages. Not IE8.
Circle
<svg width="100" height="100">
<circle r="98" stroke="black" stroke-width="2" fill="#ccc" />
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="red" />
</svg>Ellipse
<svg width="100" height="100">
<ellipse class="body" cx="50" cy="50" rx="40" ry="20" stroke="black" stroke-width="2" fill="#2fa834" />
</svg>Triangle / Polygon
<svg width="100" height="100" >
<polygon points="0,0 26,25 0,50" style="fill:#68fefe; stroke:purple; stroke-width:0" />
<polygon points="10,10 50,90 60,10" style="fill:#00ff87;stroke:purple;stroke-width:1" />
</svg>Rectangle
<svg width="100" height="100">
<rect width="300" height="100" style="fill:blue;stroke-width: 3px;stroke: red;" />
</svg>Line
<svg width="100" height="100">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>Text
<svg width="100" height="100">
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">Samus Aran</text>
</svg>Path
Path is not human editable. Use a graphics editor like Adobe Illustrator to generate SVGs.
<svg width="500" height="110">
<path d="M354.062,241.333C330.584,269.625,295.624,288,256,288c-39.625,0-74.584-18.375-98.062-46.667
C144.938,250.5,129.125,256,112,256c-44.188,0-80-35.812-80-80s35.812-80,80-80c10.812,0,21.062,2.208,30.438,6.083
C163.667,60.667,206.291,32,256,32s92.334,28.667,113.541,70.083C378.938,98.208,389.209,96,400,96c44.188,0,80,35.812,80,80
s-35.812,80-80,80C382.875,256,367.084,250.5,354.062,241.333z" fill="#cccccc" id="cloud-interior"/>
</svg>Viewbox
The viewport is the height/width in the SVG tag while the viewBox is an optional attribute.
<svg width="100" height="100" viewBox="0 0 50 20" ></svg>The 4 numbers represent x y width height.
See the Pen SVG viewbox by ninjajalapeno (@ninjajalapeno) on CodePen.