HTML中svg的作用,HTML中的SVG

SVG in HTML

You can embed SVG elements directly into your HTML pages.

Embed SVG Directly Into HTML Pages

Here is an example of a simple SVG graphic:

Sorry, your browser does not support inline SVG.

and here is the HTML code:

Example

My first SVG

来试试吧 »

SVG Code explanation:

An SVG image begins with an element

The width and height attributes of the element define the width and height of the SVG image

The element is used to draw a circle

The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are

not set, the circle's center is set to (0, 0)

The r attribute defines the radius of the circle

The stroke and stroke-width attributes control how the outline of a shape appears. We set the outline of the circle to a 4px green "border"

The fill attribute refers to the color inside the circle. We set the fill color to yellow

The closing tag closes the SVG image

Note: Since SVG is written in XML, all elements must be

properly closed!

×

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

help@w3schools.com

×

Thank You For Helping Us!

Your message has been sent to W3Schools.

W3Schools is optimized for learning and training. 示例 might be simplified to improve reading and learning.

Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.

While using W3Schools, you agree to have read and accepted our terms of use,

cookie and privacy policy.

Copyright 1999-2021 by Refsnes Data. All Rights Reserved.

W3Schools is Powered by W3.CSS.