Svg and html elements

SVG element reference

SVG drawings and images are created using a wide array of elements which are dedicated to the construction, drawing, and layout of vector images and diagrams. Here you’ll find reference documentation for each of the SVG elements.

SVG elements A to Z

A

C

D

E

F

G

H

I

L

M

P

R

S

T

U

V

Note: The SVG 2 spec requires that any unknown elements be treated as for the purpose of rendering.

SVG elements by category

Animation elements

Basic shapes

Container elements

Descriptive elements

Filter primitive elements

Font elements

Gradient elements

Graphics elements

Graphics referencing elements

Light source elements

Never-rendered elements

Paint server elements

Renderable elements

Note: The SVG 2 spec requires that any unknown elements be treated as for the purpose of rendering.

Shape elements

Structural elements

Text content elements

Text content child elements

Uncategorized elements

Obsolete and deprecated elements

Warning: These are old SVG elements which are deprecated and should not be used. You should never use them in new projects, and should replace them in old projects as soon as you can. They are listed here for informational purposes only.

C

F

G

H

M

T

V

See also

Found a content problem with this page?

This page was last modified on May 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

HTML SVG Graphics

The HTML element is a container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
	4.0	9.0	3.0	3.2	10.1

SVG Circle

Example

SVG Rectangle

Example

SVG Rounded Rectangle

Example

SVG Star

Sorry, your browser does not support inline SVG.

Example

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

SVG Logo

Sorry, your browser does not support inline SVG.

Example

Differences Between SVG and Canvas

SVG is a language for describing 2D graphics in XML. Canvas draws 2D graphics, on the fly (with a JavaScript). SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element. 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 Canvas and SVG

• 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

• Resolution independent
• Support for event handlers
• Best suited for applications with large rendering areas (Google Maps)
• Slow rendering if complex (anything that uses the DOM a lot will be slow)
• Not suited for game applications

SVG Tutorial

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

Источник

SVG In HTML Introduction

This article and its associated example shows how to use inline SVG.

Basic example

To include an inline SVG in an HTML file, paste the entire SVG file into the HTML file.

doctype html> html lang="en-US"> head> meta charset="utf-8" /> title>SVG Demotitle> meta name="viewport" content="width=device-width" /> head> body> svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" role="img"> title>A gradienttitle> linearGradient id="gradient"> stop class="begin" offset="0%" stop-color="red" /> stop class="end" offset="100%" stop-color="black" /> linearGradient> rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> svg> body> html> 

Discussion

The page is regular HTML and CSS with a single SVG. The only interesting part is the element it contains. This element and its children are declared to be in the SVG namespace. The element contains a gradient and two shapes filled with the gradient. The gradient color stops have their colors set by CSS.

There are three attributes and one nested element worth noting:

1. The viewBox attribute establishes a logical coordinate system which the SVG picture’s coordinates are relative to. In this case our picture is laid out in a 100 by 100 viewport.
2. The preserveAspectRatio attribute specifies that the aspect ratio must be preserved by centering the picture in the available size, sizing to the maximum of the height or width and then cutting off any overflow.
3. Including role=»img» ensures assistive technologies handle the SVG as an image.
4. A within an SVG provides the accessible, short-text description of the graphic. The title text is not rendered, but browsers may display it as a tooltip when the SVG is hovered. The should be the first element after the opening tag.

Best practices

If the SVG can be labeled by visible text, reference that text with an aria-labelledby attribute. Alternatively, include the aria-labelledby attribute with the id of the .

svg viewBox="0 0 100 125" role="img" aria-labelledby="svgTitle svgDescription"> title id="svgTitle">Manualtitle> desc id="svgDescription"> A non-descript twelve page booklet opened to the middle page desc> defs> style> rect  fill: #cccccc; stroke: #666; transform-origin: top; > style> defs> rect width="36" height="60" x="13" y="18" ry="2" style="transform: skewy(24deg)" /> rect width="39" height="60" x="11" y="20" ry="2" style="transform: skewy(18deg)" /> rect width="42" height="90" x="8" y="22" ry="2" style="transform: skewy(12deg)" /> rect width="36" height="60" x="50" y="18" ry="2" style="transform: skewy(-24deg)" /> rect width="39" height="60" x="50" y="20" ry="2" style="transform: skewy(-18deg)" /> rect width="42" height="90" x="50" y="22" ry="2" style="transform: skewy(-12deg)" /> svg> 

If the SVG can be described by visible text, that text can be referenced with the aria-describedby attribute. If aria-describedby is used, it will take precedence over .

In our example, we’ve included both the description and title in our aria-labelledby attribute, as it has better assistive technology support than aria-describedby .

See also

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Источник