Article introduction of Wulin.com (www.vevb.com): SVG's full name is Scalable Vector Graphics. If you have used adobe Illustrator, I believe you are not unfamiliar with this appropriate format of pictures!
Before we start using SVG, let's take a look at SVG first and explain why we use SVG.
The full name of SVG is Scalable Vector Graphics. If you have used adobe Illustrator, I believe you are not unfamiliar with this appropriate format of pictures!
Why use SVG? Browser supportIf you need to support these versions of the browser, you can use Modernizr as follows:
if (!Modernizr.svg) {
$(.gblogo img).attr(src, images/logo.png);
}
Or use the following simpler code:
<img src=gblogo.svg onerror=this.onerror=null; this.src=gblogo.png>
SVG files are used as general picturesYou can use it directly as a picture, as follows:
<img src=logo.svg href= class=logo>
csswang.com
</a>
css code:
.logo {
display:
text-indent:
width:
height:
background:
background-size:
}
Using in-line SVGYou can copy the SVG code directly into the body and you will see the picture, as follows:
<body>
<!-- Copy the SVG code here and the picture will be displayed -->
</body>
Control SVG with CSSYou can use CSS to control the SVG file. The following code will control the background color of the image when the mouse is suspended:
<g class=logo transform=translate(0.000000,500.000000) scale(0.100000,-0.100000)
fill=#00000 stroke=none>
The above code defines a class of a logo, and we can define it in CSS as follows:
.logo:hover{
fill:
...
}
Note that in SVG we use fill instead of background to define the background color.
You can even use filters to control ambiguity, as follows:
.logo:hover{
fill:
filter:
}
When you use the mouse to hover the picture, the following effect will be.
Online debugging:
Summary of SVG related toolsSVG is a very powerful picture format that can help you process pictures efficiently and has a more flexible and powerful graphic display method than JPG or PNG. I believe that if it is applied in time, it will definitely become the most popular picture processing method!