整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
們在做數據可視化的時候，經常會用到圖標，SVG可縮放矢量圖標是最佳選擇，網絡中有很多資源，今天我們介紹建立一個SVG圖標集，查找和引用這個圖標集中的圖標。
svg是標簽語言，開始與結束要用<svg></svg>標簽包裹起來，我們引用現成的圖標，所以我們不用系統的學習svg的語法，只需要了解最基本的設置就可以了：
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"> <path d="M3 0v1h4v5h-4v1h5v-7h-5zm1 2v1h-4v1h4v1l2-1.5-2-1.5z" /> </svg>
我們只需要三個參數：
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="#FD625E" viewBox="0 0 8 8"> <path d="M3 0v1h4v5h-4v1h5v-7h-5zm1 2v1h-4v1h4v1l2-1.5-2-1.5z" /> </svg>
做了上述修改：這個圖標就會是一個８０＊８０的紅色的圖標。
SVG資源網絡上可以找到很多，推薦這個網站的223個應該夠用了，這個網站是MIT license可以放心使用。
下載圖標并解壓出svg目錄：
到這里我們就把準備工作做好了。
用Power Query從文件夾導入SVG圖標：
解碼二進制：
把二進制解碼成Base64：
把上面的圖標集加載到Power BI 中，這個時候還不能直接引用SVG圖標，因為我們還需要做一個編碼聲明，才能視圖中顯示出圖標。
UTF8編碼："data:image/svg+xml;utf8,"
另外我們要改變圖標的大小與顏色，這兩個工作可以在Power Query中做，也可以在DAX中做，都可以，就是簡單的文本替換與拼接：
DAX中更接近我們excel中SUBSTITUTE：
red=SUBSTITUTE(svg[svg],"width=""8"" height=""8""","width=""80"" height=""80"" fill=""#FD625E""")
這是大小與顏色的改變。
同樣可以做綠色、黃色的圖標列
我們做一列可以直接顯示的utf8的圖標列：
這樣也看不全啊，是能顯示出圖標，不完整或者太小不清晰，我們要做一個可視化查詢：
我們用三個視覺對象來查詢SVG圖標
Chiclet Slicer可以做一個SVG圖標的矩陣列表：
Image Grid制作一個圖標云：
Html Viewer制作單個圖標視圖：
這三個視覺對象都很簡單，設置也很容易：
稍有不同的是：
就是說，我們要在Power BI 中引用圖標，大部分時候是要utf8編碼的。
通過編寫度量值，指向單個圖標：
我們先找一個要引用的圖標名稱：circle-check.svg
我們要用綠色的圖標：
ShowGreen="data:image/svg+xml;utf8,"&
CALCULATE(SELECTEDVALUE(svg[green]),'svg'[Name]="circle-check.svg")
我們引用紅色的圖標：
ShowRed=CALCULATE(SELECTEDVALUE(svg[redutf8]),'svg'[Name]="circle-check.svg")
應為我們有現成的utf8紅色圖標所以度量值前面就少了"data:image/svg+xml;utf8,"&
其實這個兩個度量值就代表了這兩個圖標：
我們可以用image形式單個引用，也可以用在條件格式中引用這兩個圖標：
有了這個圖標集，你就可以有豐富的圖標可用，可以自定義大小、顏色，做出更出色的可視化作品。
VG（Scalable Vector Graphics）是一種基于XML的圖像格式，用于定義用于網絡的矢量圖形。與柵格圖像如PNG或JPG不同，SVG圖像在放大或縮小時不會失真，這使得它特別適合于網頁設計和響應式布局。
SVG的優點包括：
SVG可以直接嵌入到HTML頁面中，可以作為一個獨立的文件被引入，或者作為CSS背景圖像使用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>SVG 基礎示例</title>
</head>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
在這個例子中，我們創建了一個簡單的SVG圖形，包括一個黃色填充的圓，周圍有一個綠色的邊框。
首先，創建一個SVG文件（例如：rectangle.svg）：
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="50" fill="blue" />
</svg>
然后，在HTML文件中引用這個SVG文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>使用SVG文件</title>
</head>
<body>
<img src="rectangle.svg" alt="藍色矩形" />
</body>
</html>
通過<img>標簽，我們引入了一個外部SVG文件。
我們可以使用CSS來改變SVG的樣式，也可以使用JavaScript來添加交互功能。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>SVG 與 CSS 和 JavaScript 交互</title>
<style>
#myPolygon {
fill: orange;
transition: fill 0.5s ease;
}
#myPolygon:hover {
fill: red;
}
</style>
</head>
<body>
<svg width="300" height="200">
<polygon id="myPolygon" points="100,10 40,198 190,78 10,78 160,198"
onclick="alert('多邊形被點擊!')" />
</svg>
<script>
document.getElementById('myPolygon').addEventListener('click', function() {
console.log('多邊形被點擊，并且已經觸發了alert。');
});
</script>
</body>
</html>
在這個例子中，我們創建了一個SVG多邊形，通過CSS為其添加了懸停效果，并通過JavaScript為其添加了點擊事件。
SVG是一個強大的工具，適用于現代的網頁設計和開發。通過上述例子，我們可以看到SVG在創建可縮放、可交互圖形方面的能力。隨著技術的不斷進步，SVG將繼續在Web設計中扮演重要角色。
點贊 + 關注 + 收藏=學會了
技術一直在演變，在網頁中使用 SVG 的方法也層出不窮。每個時期都有對應的最優解。
所以我打算把我知道的 7種 SVG 的使用方法列舉出來，有備無患~
如果你還知道其他方法，可以在評論區補充~
<?xml version="1.0" ?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title>雷猴</title>
<circle cx="50" cy="50" r="50" fill="hotpink"></circle>
</svg>
xml 是瀏覽器能讀取的格式，但如果希望 svg 能在瀏覽器中渲染出來，需要使用 xmlns 聲明渲染規則。
所以必須使用 xmlns="http://www.w3.org/2000/svg"。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>svg demo</title>
</head>
<body>
<div>
<!-- 內嵌到 HTML 中 -->
<svg width="100%" height="100%" version="1.1">
<circle cx="50" cy="50" r="50" fill="hotpink"></circle>
</svg>
</div>
</body>
</html>
可以看到上面的代碼中，<svg> 標簽并沒有使用 xmlns="http://www.w3.org/2000/svg" 聲明命名空間，這是因為 HTML 5 文檔使用 <!DOCTYPE html> 標記，它允許跳過 SVG 命名空間聲明，HTML 解析器會自動識別 SVG 元素和它的子元素，除了 <foreignObject> 元素的子元素。
在寫本文時，將 SVG 內嵌到 HTML 中 的做法是最常見的，也是比較推薦的方式之一。
做特效時，這種使用方式也是比較輕松的。
<style>
.svg_bg_img {
width: 100px;
height: 100px;
background: url('./case1.svg') no-repeat;
background-size: 100px 100px;
}
</style>
<div class="svg_bg_img"></div>
SVG 也是一種圖片格式，所以按理說是能當做背景圖來使用的。
一試，果然可以~
<img src="./case1.svg" width="100" height="100">
既然 SVG 可以在 CSS 中當背景圖使用，那也可以在 <img> 標簽里使用咯~
<iframe
src="./case1.svg"
width="100"
height="100"
></iframe>
iframe 可以在網頁里再嵌套一個網頁，既然 SVG 可以直接在瀏覽器打開，那使用 <iframe> 引用 SVG 同樣也是可以的。
需要注意的是，<iframe> 默認是有個邊框樣式的，如果你使用這種方式引入 SVG 可能還需要自己手動調節一下樣式。
<embed
src="./case1.svg"
width="100"
height="100"
/>
<embed> 標簽定義了一個容器，用來嵌入外部應用或者互動程序。它也可以插入各種媒體資源。
<embed> 標簽已經被標準采用了。但它不能包含任何子內容，因此如果嵌入失敗就沒有備用選項了。所以現階段來看，我不太推薦使用 embed 的方式引入 SVG 。
<object
data="./case1.svg"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install"
></object>
<object> 是通過 data 屬性引入資源的。它可以用于嵌入圖像，類似 <img> ，也可以用于嵌入獨立的 HTML 文檔，類似 <iframe> 。
使用 <object> 嵌入 SVG 可以讓那些不能直接顯示 SVG 但又有 SVG 插件的老舊瀏覽器展示 SVG。
需要注意的是，在某些現代瀏覽器中，type 和 codebase 是可以不寫的。
type 用來聲明當前引入的資源是屬于什么類型。
在寫本時，我推薦使用 內嵌到 HTML 的方式來做日常開發。
其他方式按照你實際需求去使用即可。
最后的 embed 和 object 這兩種方式可以當做備用方案去使用。
?雷猴 SVG
《Canvas 從入門到勸朋友放棄（圖解版）》
《Fabric.js 從入門到膨脹》
《『Three.js』起飛！》
《console.log也能插圖?。?！》
《純css實現117個Loading效果》
《視差特效的原理和實現方法》
《這18個網站能讓你的頁面背景炫酷起來》
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
