How to use SVG in HTML5

In HTML5 we can use the tag,

SVG is a vector graphics format that can be redrawn to adapt to the size of the Web page as it changes in size without any distortion; very Suitable for use in responsive web design. This article will give you a detailed introduction to how to use SVG in HTML5. I hope it will be helpful to you. [Recommended related video tutorials: HTML5 tutorial]

Using HTML5

##SVG Part of the HTML 5 draft specification, the

Note:

1. To use the

2. This can only be used for static SVG import.

The following is a simple HTML5 SVG example.

<svg  id = "circle"  height = "200"  xmlns = "http://www.w3.org/2000/svg" > 
      <circle  id = "greencircle"  cx = "30"  cy = "30"  r = " 30"  fill = "red"  /> 
</svg>

Rendering:

Use the tag to import SVG images

Note: The tag can only be used to import static SVG images.

<img src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/232/307/737/1543556185310125.jpg?x-oss-process=image/resize,p_40"  class="lazy"   src = "green-circle.svg"  height = "80"  alt="漂亮的绿色圆圈" />

Rendering:

##Use the

<object type="image/svg+xml" data="image.svg">
    <img  src="/static/imghwm/default1.png"  data-src="image.svg"  class="lazy"   / alt="How to use SVG in HTML5" >
</object>

Using the tag to import SVG images

<embed type="image/svg+xml" src="image.svg" />

Not recommended SVG images are imported using the tag, which is not part of the HTML specification but is widely supported on all browsers primarily used to implement Flash plug-ins.

Using the

Use CSS background image to import SVG image

We can use css background attribute to import SVG image as background image

This is equivalent to using the tag, and has the same advantages and disadvantages.

#id {
  background-image: url(image.svg)  no-repeat;
}

Rendering:

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

The above is the detailed content of How to use SVG in HTML5. For more information, please follow other related articles on the PHP Chinese website!