svg01——svg簡介及簡單使用

smile1213 發表於 2021-11-30

一、SVG 意為可縮放向量圖形(Scalable Vector Graphics)

svg是使用XML描述的向量檔案。

向量圖與點陣圖有什麼區別呢?
  • 點陣圖是基於畫素點對顏色的描述,所以在放大之後會模糊
  • 向量圖是基於數學的描述,比如圓形,怎麼放大都是個圓

在這裡插入圖片描述

二、使用svg的方式

  • img引入
  • css背景使用
  • 直接在html中引入
  • 直接在瀏覽器開啟
直接上程式碼:

1、首先準備一個 rect.svg 的檔案

<!-- 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、在 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');
}

直接在瀏覽器開啟的效果:

在這裡插入圖片描述