svg01-svg introduction and simple use

1. SVG means Scalable Vector Graphics (Scalable Vector Graphics)

svg is a vector file described in XML.

What is the difference between vector graphics and bitmaps?

• The bitmap is based on the description of the color of the pixel, so it will be blurred after zooming in
• The vector diagram is based on the description of mathematics, such as a circle, how to enlarge it is a circle

Second, the way to use svg

• img introduction
• css background use
• Introduce directly in html
• Open directly in the browser

Directly on the code:

1. First prepare a rect.svg file

<!-- xmlns 是 svg 的命名空间 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <!-- 矩形标签及属性，在下一篇文章中有具体介绍 -->
    <rect x="50" y="20" width="150" height="150" style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9" />
</svg>

2. In test.html

<!-- 1、img引入 -->
<img src="./rect.svg" alt="">

<!-- 2、背景使用（样式在下面css中有定义） -->
<div class="rect"></div>

<!-- 3、直接在html中使用 -->
<div>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="50" y="20" width="150" height="150" style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9" />
    </svg>
</div>

<!-- 4、直接在浏览器中打开svg文件（那就直接打开上面的rect.svg咯）  -->

.rect {
    width: 200px;
    height: 200px;
    background-image: url('./rect.svg');
}

The effect of opening directly in the browser: