English 中文(简体)
SVG - Overview
  • 时间:2024-11-03

SVG - Overview


Previous Page Next Page  

What is SVG?

    SVG, Scalable Vector Graphics is an XML based language to define vector based graphics.

    SVG is intended to display images over the web.

    Being vector images, SVG image never loses quapty no matter how they are zoomed out or resized.

    SVG images supports interactivity and animation.

    SVG is a W3C standard.

    Others image formats pke raster images can also be clubbed with SVG images.

    SVG integrates well with XSLT and DOM of HTML.

Advantages

    Use any text editor to create and edit SVG images.

    Being XML based, SVG images are searchable, indexable and can be scripted and compressed.

    SVG images are highly scalable as they never loses quapty no matter how they are zoomed out or resized

    Good printing quapty at any resolution

    SVG is an Open Standard

Disadvantages

    Being text format size is larger then compared to binary formatted raster images.

    Size can be big even for small image.

Example

Following XML snippet can be used to draw a circle in web browser.

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>

Embed the SVG XML directly in an HTML page.

testSVG.htm

<html>
   <title>SVG Image</title>
   <body>
   
      <h1>Sample SVG Image</h1>
      
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
      </svg>
   
   </body>
</html>

Output

Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. In Internet Explorer, activeX controls are required to view SVG images.