SVG Tutorial

## SVG Basic

SVG HOME SVG Intro SVG Example SVG in HTML

## SVG Shapes

SVG Rectangle SVG Circle SVG Ellipse SVG Line SVG Polygon SVG Polyline SVG Path SVG Text SVG Stroking

## SVG Filters

SVG Filters Intro SVG Blur Effects SVG Drop Shadows

## SVG Gradients

SVG Linear SVG Radial

## SVG Examples

SVG Examples

## SVG Reference

SVG Reference

# SVG Tutorial

« W3Schools Home
Next Chapter »

SVG stands for Scalable Vector Graphics.

SVG defines graphics in XML format.

Start learning SVG now!

## SVG Example

<html>
<body>
<h1>My first SVG</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
</body>
</html>
Try it yourself »

Click on the "Try it Yourself" button to see how it works.

## SVG Examples

Learn from examples! With our editor, you can edit the SVG, and click on a button to view the result.

Try-It-Yourself!

## SVG Reference

At W3Schools you will find a complete SVG reference, listing all SVG elements from the W3C Recommendation (SVG Version 1.1).

SVG Reference

« W3Schools Home
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE