SVG (Scalable Vector Graphics)

SVG Graphics are scalable because they are vector based (drawn with math function). If you resize SVG Graphic it still have good design because it’s based on vector. Here are some sample basic SVG :

<svg x="0px" y="0px" width="600px" height="300px" viewBox="0 0 600 300"> <rect x="50" y="50" fill="red" stroke="#0ff0f0" width="100" height="100" /> <circle fill="blue" stroke="black" cx="100" cy="200" r="45"/> <line fill="none" stroke="#0f00ff" x1="250" y1="50" x2="275" y2="150"/> <polygon fill="#ccd00d" stroke="#00ff00" points="300,50 500,50 450,100 350,100 300,50" /> </svg>
View Demo
<svg x="0px" y="0px" width="600px" height="300px" viewBox="0 0 600 300"> <rect class="myrect" x="50" y="50" width="100" height="100" /> <circle class="mycircle" cx="100" cy="200" r="45"/> </svg> <style> .myrect { fill: #0dd0dd; } .mycircle { fill: #10f01d; stroke: #00ccdd; } .mycircle:hover { fill: #ff0000; stroke: #0000ff; } </style>
View Demo
<svg viewBox="0 0 400 400"> <g class="mygroup"> <rect x="50" y="50" width="100" height="100" /> <circle cx="100" cy="200" r="45"/> <text x="80" y="70">My Text</text> </g> </svg> <style> .mygroup { fill: #10f01d; stroke: #00ccdd; } .mygroup:hover { fill: #ff0000; stroke: #0000ff; } </style>
View Demo