SVG可伸縮的矢量圖形
SVG是對畫該圖形時的一些路徑左驾，做出精準的允坚，必要的與分辨率無關(guān)的一種描述。即對矢量圖的描述
在此安利一個svg繪圖的網(wǎng)址隙笆，可以直接手動繪圖锌蓄，然后生成相關(guān)的svg描述，即可實現(xiàn)圖片
屬于所見所得的方式
有兩種方式在Adobe系列軟件中Illustrator可以直接生成svg的相關(guān)代碼撑柔，還有相關(guān)的在線轉(zhuǎn)換網(wǎng)站瘸爽，可以實現(xiàn)將圖片和svg的相互轉(zhuǎn)換，https://www.aconvert.com/cn/format/svg/ 以及 https://convertio.co/zh/svg-converter/
以及一個在線的svg繪圖網(wǎng)站http://www.zuohaotu.com/svg/
svg可以支持任意的曲線铅忿，文本剪决，動畫效果，還能整合js腳本實現(xiàn)檀训。
其中還有一個繪圖程序 https://inkscape.org/en/ 可以繪制矢量圖
在HTML中嵌入SVG
<!DOCTYPE html>
<html>
<head>
<title>svg頁面</title>
</head>
<body>
<p>這是一個svg</p>
<!-- svg 圖形的命名空間 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- 這里填寫svg的相關(guān)代碼 -->
</svg>
</body>
</html>
image
矩形
下面創(chuàng)建矩形
<!DOCTYPE html>
<html>
<head>
<title>svg頁面</title>
</head>
<body>
<p>這是一個svg</p>
<!-- svg 圖形的命名空間 -->
<svg xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"
/>
</svg>
</body>
</html>
使用的是rect標簽柑潦，創(chuàng)建一個矩形。
width為寬度肢扯，height為高度
style為樣式妒茬，fill代表顏色為藍色，寬度為1蔚晨，邊框為黑色
image
圓角矩形
<!DOCTYPE html>
<html>
<head>
<title>svg頁面</title>
</head>
<body>
<p>這是一個svg</p>
<!-- svg 圖形的命名空間 -->
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<rect x="10" y="10" width="300" height="100" rx="50" ry="50"/>
</svg>
</body>
</html>
image
不透明矩形
<!DOCTYPE html>
<html>
<head>
<title>svg頁面</title>
</head>
<body>
<p>這是一個svg</p>
<!-- svg 圖形的命名空間 -->
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<rect x="10" y="10" width="300" height="100" rx="50" ry="50" fill-opacity="0.5"/>
</svg>
</body>
</html>
image
圓形
circle元素可以創(chuàng)建一個圓形
image
<!DOCTYPE html>
<html>
<head>
<title>svg頁面</title>
</head>
<body>
<p>這是一個svg</p>
<!-- svg 圖形的命名空間 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="25" cy="25" r="5"/>
</svg>
</body>
</html>
實現(xiàn)了一個圓形
橢圓
使用的是ellipse
<!DOCTYPE html>
<html>
<head>
<title>svg頁面</title>
</head>
<body>
<p>這是一個svg</p>
<!-- svg 圖形的命名空間 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<ellipse cx="10" cy="5" rx="10" ry="5"/>
</svg>
</body>
</html>
image
直線
使用line繪制
image
<!DOCTYPE html>
<html>
<head>
<title>svg頁面</title>
</head>
<body>
<p>這是一個svg</p>
<!-- svg 圖形的命名空間 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<line x1="0" y1="8" x2="10" y2="20" stroke="black"/>
</svg>
</body>
</html>
