MENU


SVG

Using SVG, images can be zoomed in (CTRL +) without degradation.

Based on XML, SVG images can be searched, indexed, scripted, compressed, and animated.

It is easier to use a drawing program such as Inkscape to draw SVG images, and to convert other image files to the SVG format.

An SVG image can be used in a variety of ways.

A. Using the browser directly.
RESETRUNFULL
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="60" cy="60" r="50" stroke="black" stroke-width="2" fill="red" />
</svg>
B. Using <img>.
RESETRUNFULL
<!DOCTYPE html><html>
<head></head>
<body>
   <img src="/shared/circle.svg"/>
</body></html>
C. Using <object>.
RESETRUNFULL
<!DOCTYPE html><html>
<head></head>
<body>
   <object data="/shared/circle.svg" type="image/svg+xml">
      Your browser does not support SVG.
   </object>
</body></html>
D. Using <embed>.
RESETRUNFULL
<!DOCTYPE html><html>
<head></head>
<body>
   <embed src="/shared/circle.svg" type="image/svg+xml" />
</body></html>
E. Using <iframe>.
RESETRUNFULL
<!DOCTYPE html><html>
<head></head>
<body>
   <iframe src="/shared/circle.svg"></iframe>
</body></html>
F. Using <a>.
RESETRUNFULL
<!DOCTYPE html><html>
<head></head>
<body>
   <a href="/shared/circle.svg">SVG image</a>
</body></html>
G. Using inline SVG.
RESETRUNFULL
<!DOCTYPE html><html>
<head></head>
<body>
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <circle cx="60" cy="60" r="50" stroke="black" stroke-width="2" fill="red"/>
   </svg>
</body></html>