Home > Article > Web Front-end > HTML5 inline SVG

HTML5 inline SVG

(*-*)浩Original: 2019-10-25 16:18:022228browse

HTML5 supports inline SVG.

HTML5 inline SVG

What is SVG? (Recommended learning: html tutorial)

SVG refers to scalable vector graphics (Scalable Vector Graphics)

SVG is used to define vector-based graphics for the network Graphics

SVG uses XML format to define graphics

SVG images will not lose their graphic quality when they are enlarged or resized

SVG is a standard of the World Wide Web Consortium

Advantages of SVG

Compared with other image formats (such as JPEG and GIF), the advantages of using SVG are:

SVG images can be edited with text

SVG images can be searched, indexed, scripted or compressed

SVG is scalable

SVG images can be edited at any resolution Print with high quality

SVG can be enlarged without losing image quality

Browser support

Internet Explorer 9, Firefox, Opera , Chrome and Safari support inline SVG.

Embed SVG directly into HTML pages

In HTML5, you can embed SVG elements directly into HTML pages:

Example

<!DOCTYPE html>
<html>
<body><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg></body>
</html>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：html table tagNext article：html table tag

See more

HTML5 inline SVG

Related articles