ABOUT
CONTACT
CONTACT@ADZETECH.COM

LERAN HTML COMPLETE

Learn one of the most powerful programming languages in the world and become a rockstar developer.

What is SVG?

  • SVG stands for Scalable Vector Graphics
  • SVG is used to define graphics for the Web
  • SVG is a W3C recommendation

SVG images and their behaviors are defined in XML files — that means SVG images can be created and edited with any text editor. There are several other advantages of using SVG over other image formats like JPEG, PNG, GIF etc.

  • SVG images can be searched, indexed, scripted, and compressed.
  • SVG images can be created and modifed using JavaScript in real time.
  • SVG images can be printed with high quality at any resolution.
  • SVG content can be animated using the built-in animation elements.
  • SVG images can contain hyperlinks to other documents.

The HTML <svg> Element

The HTML <svg> element is a container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

Browser Support

The numbers in the table specify the first browser version that fully supports the <canvas> element.

Browsers Icon

Browsers

  • Firefox
  • Google Chrome
  • Internet Explorer
  • Apple Safari
  • Opera

Basic Support

  • YES
  • YES
  • YES
  • YES
  • YES

Version

  • 3.0
  • 4.0
  • 9.0
  • 3.2
  • 10.1

Draw Line

Example

Try this code »
<svg width="300" height="200">
    <line x1="50" y1="50" x2="250" y2="150" style="stroke:red; stroke-width:3;" />
</svg>

Draw Cricle

Example

Try this code »
<!DOCTYPE html>
<html>
    <body>
        <svg width="100" height="100">
            <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
        </svg>
    </body>
</html>

Draw Rectangle

Example

Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Create a Rectangle with HTML5 SVG</title>
<style type="text/css">
    svg {
        border: 1px solid black;
    }
</style>
</head>
<body>
    <svg width="300" height="200">
        <rect x="50" y="50" width="200" height="100" style="fill:orange; stroke:black; stroke-width:3;" />
    </svg>
</body>
</html>

Draw Star

Example

Try this code »
<!DOCTYPE html>
<html>
<body>

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
Sorry, your browser does not support inline SVG.
</svg>
 
</body>
</html>

Draw Text

Example

Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Render Text with HTML5 SVG</title>
<style type="text/css">
    svg {
        border: 1px solid black;
    }
</style>
</head>
<body>
    <svg width="300" height="200">
        <text x="20" y="30" style="fill:purple; font-size:22px;">
            Welcome to Adzeetch!
        </text>
        <text x="20" y="30" dx="0" dy="20" style="fill:navy; font-size:14px;">
            Here you will find lots of useful information.
        </text>
    </svg>
</body>

Draw Simple Logo

SVG Sorry, your browser does not support inline SVG.

Example

Try this code »
<!DOCTYPE html>
<html>
<body>

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"
      style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%"
      style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana"
  x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
d
</body>
</html>

Differences Between SVG and Canvas

The HTML5 introduced the two graphical elements Canvas and SVG for creating rich graphics on the web, but they are fundamentally different. The following table summarizes some of the basic differences between these two elements, which will help you to understand how to use the Canvas and SVG elements effectively and appropriately.

SVG Canvas
Vector based (composed of shapes) Raster based (composed of pixel)
Multiple graphical elements, which become the part of the DOM Single HTML element similar to <img> in behavior
Modified through script and CSS Modified through script only
Give better performance with smaller number of objects or larger surface, or both Give better performance with smaller surface or larger number of objects, or both
Better scalability — can be printed with high quality at any resolution Poor scalability — not suitable for printing on higher resolution
Previous Next
x
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Privacy Policy That's Fine