HTML SVG Graphics

SVG (Scalable Vector Graphics)

SVG defines vector-based graphics in XML, which can be directly embedded in HTML pages.

For more information, please visit our website.

SVG graphics are scalable, and do not lose any quality if they are zoomed or resized:

����� ����� SVG Sorry, your browser does not support inline SVG.

SVG is supported by all major browsers.

What is SVG?

• SVG stands for Scalable Vector Graphics
• SVG is used to define vector-based graphics for the Web
• SVG defines graphics in XML format
• Each element and attribute in SVG files can be animated
• SVG is a W3C recommendation
• SVG integrates with other standards, such as CSS, DOM, XSL and JavaScript

The

The HTML element is a container for SVG graphics.

SVG has several methods for drawing paths, rectangles, circles, polygons, text, and much more.

SVG Circle

Sorry, your browser does not support inline SVG.

Example

 



Try it Yourself »

SVG Rectangle

Sorry, your browser does not support inline SVG.

Example

 

Try it Yourself »

SVG Rectangle with Opacity and Rounded Corners

Sorry, your browser does not support inline SVG.

Example

    style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />

Try it Yourself »

SVG Star

Sorry, your browser does not support inline SVG.

Example

    style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

Try it Yourself »

SVG Gradient Ellipse and Text

����� ����� SVG Sorry, your browser does not support inline SVG.

Example

 
   
     
     
   
 
 
  SVG
  Sorry, your browser does not support inline SVG.

Try it Yourself »

Differences Between SVG and Canvas

SVG is a language for describing 2D graphics in XML, while Canvas draws 2D graphics, on the fly (with JavaScript).

SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers to SVG graphics.

In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.

Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

Comparison of SVG and Canvas

The table below shows some important differences between Canvas and SVG:

SVG Canvas

• Resolution independent
• Support for event handlers
• Good text rendering capabilities
• Slow rendering if complex
• Not suited for game applications

• Resolution dependent
• No support for event handlers
• Poor text rendering capabilities
• You can save the resulting image as .png or .jpg
• Well suited for graphic-intensive games

SVG Tutorial

To learn more about SVG, please read our SVG Tutorial.

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an :

Report Error

If you want to report an error, or if you want to make a suggestion, send us an :

What is an SVG file?

If you’re creating content on the web, you’ll likely come across a range of different file types. But which one is best? In this short series from Shorthand, we’re going deep on some of the most popular file types, so you can talk a little more confidently to your designer, developer, or team.

SVG files are Scalable Vector Graphics files. They are used to create and edit vector images.

Unlike bitmap images, which are made up of a fixed number of pixels, vector images are composed of mathematical formulas that define the shapes and colours in the image. This makes them scalable, so that hey can be enlarged or reduced without losing quality. Files in the SVG format are often used for logos, icons, and illustrations.

That’s the potted summary! But now, let's dive into the detail. Feel free to skim down to find an answer to all your SVG questions.

In this post, we’ll cover:

• A more detailed definition on the SVG format
• A short history of the SVG, so you can impress your colleagues
• The benefits of SVGs
• The cons of SVGs
• How to open an SVG
• How to create and edit an SVG
• The difference between SVGs, PNGs, and JPEGs
• The difference between SVG and EPS files

Create interactive content for free with Shorthand.

Prepare stunning, interactive web content for free. No code required.
Get started.

What is an SVG?

If you've ever opened an image file, chances are it was in one of two formats: JPEG or PNG. These are the most popular image formats on the web. But there's another format that's becoming increasingly popular, especially for vector images: SVG.

SVG stands for Scalable Vector Graphics. Unlike JPEG, PNG, and GIF files, which are made up of pixels, SVG files are made up of vector graphics. That means they can be scaled to any size without losing quality. They're also usually smaller in file size than pixel-based images.

With competitive price and timely delivery, SINAVA sincerely hope to be your supplier and partner.

To get slightly more technical, SVG files are XML files, which means they contain markup tags that define the image. This makes them easy to edit and customise. You can open an SVG file in a text editor and change any of the markup tags to change the image. For example, you can change the colour of an SVG image simply by changing the colour attribute in the markup tag.

SVG files have been around since , but they're only now gaining widespread popularity. That's because modern web browsers have finally started to support them natively. (In the past, you needed a plugin like Adobe Flash or Microsoft Silverlight to view SVG files).

SVG files are most commonly used for logos, icons, and illustrations. They're well-suited for these types of images because they can be scaled to any size without losing quality. This makes them perfect for use on the web, where images need to be resized frequently.

SVG files are also becoming more popular for use in marketing and advertising. That's because they can be scaled down to small sizes without losing quality, which is important for images.

Learn more about vector images.

A short history of the SVG

The SVG file format was first proposed by Dutch software engineer, Martijn Koster, in . SVG files were first introduced in by the World Wide Web Consortium (W3C) as an open standard vector graphic format that could be used on the web.

However, it wasn't until that the SVG file format was finalised and approved as an ISO standard.

The SVG was designed to replace the JPEG and PNG formats, which are both raster graphics formats. Raster graphics are made up of a series of pixels, whereas vector graphics — as we mentioned above — are made up of mathematical equations that define the lines and shapes in an image. This makes SVG files much smaller in size than raster graphics, and they can be scaled to any size without losing quality.

What are the benefits of SVGs?

There are many benefits of using SVG files:

They're resolution independent. That means they can be scaled to any size without losing quality. This makes them perfect for use on the web, where images need to be resized frequently.
They're smaller. SVG files are often smaller in file size than raster graphics. That's because they're made up of vector graphics, which are composed of mathematical equations rather than pixels. This makes them much smaller in file size than raster graphics, which are made up of a series of pixels. This makes SVG files ideal for use on the web, where file size is important for loading times.
They can be animated. SVG files can be used to create animations using CSS or JavaScript. This makes them perfect for use in interactive applications or websites.
They're easy to create and edit. You can create SVG files using a vector editing program like Adobe Illustrator. And there are many other online tools that can be used to edit SVG files (we mention a few of them, below).
They can be edited in a text editor. Because SVG files are produced in a text-based markup language similar to HTML, they an be edited using a text editor. Note: If you don't know what you're doing, you could damage the file. It's best to use a vector editing program like Adobe Illustrator to edit SVG files.

1. They're supported by all major browsers. SVG files are now supported by all major browsers, including Edge, Firefox, Safari, and Chrome.

What are the cons of SVG files?

There are a few potential drawbacks to using SVG files:

SVG files are not supported by older browsers. While most modern browsers support SVG files, some older browsers do not. If you're targeting a large audience, it's important to make sure your SVG files are compatible with all of the browsers they might be using.
They can be more complex than other image formats. SVGs are more complex than other image formats like JPEG and PNG, which can make them more difficult to work with, depending on your skill level and experience.
They're not always the best choice for photos. While SVG files are great for logos, icons, and illustrations, they're not necessarily the best choice for photos. That's because photos are made up of a lot of pixels. As mentioned above, SVG files are better suited for vector graphics.

1. They don't always look great at small sizes (although this is improving). This can be a problem if you need to use an SVG image in an or on a website with a small screen. However, there are ways to work around this. One is to use a tool like svg2png, which converts SVG files to PNG format. This can be helpful if you need to use an SVG file in a situation where it's not supported. Another solution is to create multiple versions of your SVG image at different sizes. This way, you can choose the size that looks best for each situation.

How to open SVG files

If you're using a modern browser, you can open an SVG file just like any other image file. Just drag and drop the file into your browser, or click on the file to open it.

SVG files can be opened in most vector graphic editors and design apps, such as Adobe Illustrator, Adobe Photoshop, Inkscape, or Affinity Designer. They can also be opened in text editors, such as Atom or Notepad++.

If you're using an older browser, you'll need to install a plugin like Adobe Flash or Microsoft Silverlight to view SVG files.

How to create and edit an SVG file

Creating and editing SVG files is a bit more complex than working with raster graphics. That's because you need to use vector-based apps like Adobe Illustrator, Inkscape, CorelDRAW, GIMP, or Sketch.

If you're not familiar with vector-based software, it can be tricky to get started. But once you get the hang of it, it's actually quite easy to use.

There are also a few online tools that you can use to create and edit SVG files, such as Method Draw, Vectr, and Figma.

What's the difference between SVG, PNG, and JPEG?

The two most common image formats on the web are JPEG (or JPG) and PNG. Both of these formats are raster graphics or raster images, which means they're made up of pixels.

This makes them ideal for photos, as they will always look sharp and clear no matter what size they are. However, raster graphics can only be scaled a certain amount before they start to lose quality.

This means that if you need to use an image at a different size than what it was originally created for, it might not look as good.

SVG files are vector graphics, which means they're made up of vectors. This makes them ideal for logos, icons, and illustrations. SVG graphics can be scaled to any size without losing quality, while raster files will become blurry and pixelated if they're scaled too large.

What is the difference between an SVG and EPS file?

SVG files are a great way to share vector graphics online. They're easy to create and edit, and they're supported by all major browsers. If you need to use an image on a website or in an , and you want it to look its best, try using an SVG file. You might be surprised at how much difference it makes.

If you want to learn more, please visit our website Svg.