Scalable Vector Graphics in HTML5

Scalable Vector Graphics in HTML5

PONRAM的头像

In this post I try to intoduce Scalable Vector Graphics(SVG) with some examplesScalable Vector Graphics is used to define vector-based graphics for the high end  Web Applications. It defines the graphics in XML format.

The main advantage of SVG is it does not make any lose in quality even if they are zoomed or resized. One of the added advantage of SVG is every element and every attribute in SVG files can be animated. Here we can see a example of creating an circle with SVG

<!DOCTYPE html>
<html>
<body>

<h1>Circle Using SVG</h1>

<svg>
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="green" />
</svg>
 
</body>
</html>

5 帖子 / 0 new
最新文章
如需更全面地了解编译器优化,请参阅优化注意事项
PONRAM的头像

Rectangle Using SVG

<!DOCTYPE html>
<html>
<body>

<svg>
  <rect width="200" height="80" style="fill:rgb(0,5,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>
 
</body>
</html>

PONRAM的头像

Ellipse Using SVG

<!DOCTYPE html>
<html>
<body>

<svg>
  <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:green;stroke:purple;stroke-width:2" />
</svg>

</body>
</html>

PONRAM的头像

Line using SVG

<svg>
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

JudLup Luna的头像

you should use canvas tag for draw on browser

JudLup Luna

登陆并发表评论。