First, what svg yes?
SVG meaning scalable vector graphics (Scalable Vector Graphics).
SVG is using XML language to describe two-dimensional graphics and drawing program.
SVG image under magnification or changing the size of its image quality will not be lost.
SVG is a standard World Wide Web Consortium.
Two, svg advantage
Compared with other image formats (such as JPEG and GIF), using SVG's advantages:
- SVG images can be created and modified using a text editor;
- SVG images can be searched, indexed, scripted or compression;
- SVG is scalable;
- SVG image can be printed at high resolution at any;
- SVG can be amplified in a case where the image quality is not reduced;
Third, the browser support case
image.png
Fourth, use
1, can be opened directly in the browser;
2, used in HTML;
the SVG document file can be embedded by HTML tags: < the embed > , < Object > , < iframes > and < IMG > .
SVG code can be embedded directly into an HTML page, or link directly to the SVG file.
(1) < the embed > tag
- Advantages: All major browsers are supported, and allows scripting
- Cons: Not recommended (but allowed in HTML5) in HTML4 and XHTML,
Example:
<embed width="300px" height="300px" src="img/demo.svg" type="image/svg+xml" />
(2) using < Object > tag
- Advantages: All major browsers are supported, and support for HTML4, XHTML and HTML5 standards
- Disadvantages: does not allow the use of scripts.
Example:
<object width="300px" height="300px" data="img/demo.svg" type="image/svg+xml"></object>
(3) using < iframes > tag
- Advantages: All major browsers are supported, and allows scripting
- Cons: Not recommended (but allowed in HTML5) in HTML4 and XHTML,
Example:
<iframe width="300px" height="300px" src="img/demo.svg"></iframe>
(4) directly in the HTML code for embedding SVG
Example:
<svg width="500px" height="500px" style="margin:50px;" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" rx="10" ry="10" width="300" height="300" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.1;stroke-opacity:0.9;opacity:0.9;"/> </svg>
(5) using the < IMG > tag
Example:
<img src="img/demo.svg" width="300px" height="300px"/>
(6) linked to the svg file
Example:
<a href="img/demo.svg">查看svg</a>
3, in the css
Example:
1 .container{ 2 background: white url(img/demo.svg) repeat; 3 }
- Examples of articles please visit: SVG entry Comments (example piece)
- Theoretical articles please visit: SVG entry Comments (theory section)
- path Detailed articles please visit: SVG's path Detailed
Author: ywyan
link: https: //www.jianshu.com/p/0899c6b481cd
Source: Jane books
are copyrighted by the author. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.