SVG

What is SVG?

  • SVG stands for Scalable Vector Graphics
  • SVG is used to define vector-based graphics for the Web
  • SVG defines the graphics in XML format
  • SVG graphics do NOT lose any quality if they are zoomed or resized
  • Every element and every attribute in SVG files can be animated
  • SVG is a W3C recommendation
  • SVG integrates with other W3C standards such as the DOM and XSL

 

 

How to make circle in svg ?

<!DOCTYPE html>

<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta charset=”utf-8″ />
<title></title>
</head>
<body>
<svg width=”500″ height=”500″ >
<circle cx=”200″ cy=”200″ r=”100″ stroke=”green” stroke-width=”2″ fill=”orange”></circle>
</svg>
</body>
</html>

Circle

 

 

 

 How to create line in svg?

<!DOCTYPE html>

<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta charset=”utf-8″ />
<title></title>
</head>
<body>
<svg width=”300″ height=”300″>
<line x1=”200″ y1=”100″ x2=”80″ y2=”100″ stroke=”red” stroke-width=”2″></line>
</svg>

</body>
</html>

line

 

How to create rectangle in svg?

<!DOCTYPE html>

<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta charset=”utf-8″ />
<title></title>
</head>
<body>
<svg width=”500″ height=”500″>
<rect x=”100″ y=”80″ width=”200″ height=”200″ stroke=”yellow” stroke-width=”2″ fill=”gray”></rect>
</svg>

</body>
</html>

rectangle

 

How to create IPOD in svg ?

<!DOCTYPE html>

<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta charset=”utf-8″ />
<title></title>
</head>
<body>
<svg width=”500″ height=”1000″>
<rect x=”100″ y=”200″ width=”200″ height=”400″ stroke=”black” stroke-width=”2″ fill=”gray” fill-opacity=”30″>

</rect>
<rect x=”110″ y=”210″ width=”180″ height=”200″ stroke=”black” stroke-width=”3″ fill=”black”>

</rect>
<circle cx=”200″ cy=”500″ r=”80″ stroke=”orange” fill=”white” stroke-width=”2″><title style=”color:black”>>></title></circle>
<text fill=”orange” x=”120″ y=”300″>Develop by:Nawab Khan</text>
<text fill=”orange” x=”182″ y=”445″ stroke=”orange” stroke-width=”1″>Menu</text>
<text fill=”orange” x=”130″ y=”503″ stroke=”orange” stroke-width=”1″>|<<</text>
<text fill=”orange” x=”250″ y=”503″ stroke=”orange” stroke-width=”1″>>>|</text>
<text fill=”orange” x=”190″ y=”565″ stroke=”orange” stroke-width=”1″>>||</text>

<circle cx=”200″ cy=”500″ r=”40″ stroke=”black” fill=”black” stroke-width=”2″></circle>
</svg>
</body>
</html>

Ipod

 

 

 

Leave a comment