Power BI Desktop中SVG圖標(biāo)集的引用

Power BI Desktop中SVG圖標(biāo)集的引用實(shí)踐

們在做數(shù)據(jù)可視化的時(shí)候，經(jīng)常會用到圖標(biāo)，SVG可縮放矢量圖標(biāo)是最佳選擇，網(wǎng)絡(luò)中有很多資源，今天我們介紹建立一個(gè)SVG圖標(biāo)集，查找和引用這個(gè)圖標(biāo)集中的圖標(biāo)。

SVG小知識：

svg是標(biāo)簽語言，開始與結(jié)束要用<svg></svg>標(biāo)簽包裹起來，我們引用現(xiàn)成的圖標(biāo)，所以我們不用系統(tǒng)的學(xué)習(xí)svg的語法，只需要了解最基本的設(shè)置就可以了：

<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>

我們只需要三個(gè)參數(shù)：

width:圖標(biāo)的寬度，數(shù)值是絕對大小，可以相對大小用vh
height:圖標(biāo)的高度，數(shù)值是絕對大小，可以相對大小用vh
fill:圖標(biāo)的填充顏色，可以用英文名稱，可以是顏色編碼#FD625E

 <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>

做了上述修改：這個(gè)圖標(biāo)就會是一個(gè)８０＊８０的紅色的圖標(biāo)。

SVG資源

SVG資源網(wǎng)絡(luò)上可以找到很多，推薦這個(gè)網(wǎng)站的223個(gè)應(yīng)該夠用了，這個(gè)網(wǎng)站是MIT license可以放心使用。

下載圖標(biāo)并解壓出svg目錄：

到這里我們就把準(zhǔn)備工作做好了。

導(dǎo)入SVG圖標(biāo)

用Power Query從文件夾導(dǎo)入SVG圖標(biāo)：

解碼二進(jìn)制：

把二進(jìn)制解碼成Base64：

DAX中的準(zhǔn)備工作：

把上面的圖標(biāo)集加載到Power BI 中，這個(gè)時(shí)候還不能直接引用SVG圖標(biāo)，因?yàn)槲覀冞€需要做一個(gè)編碼聲明，才能視圖中顯示出圖標(biāo)。

UTF8編碼："data:image/svg+xml;utf8,"

另外我們要改變圖標(biāo)的大小與顏色，這兩個(gè)工作可以在Power Query中做，也可以在DAX中做，都可以，就是簡單的文本替換與拼接：

DAX中更接近我們excel中SUBSTITUTE：

red=SUBSTITUTE(svg[svg],"width=""8"" height=""8""","width=""80"" height=""80"" fill=""#FD625E""")

這是大小與顏色的改變。

同樣可以做綠色、黃色的圖標(biāo)列

我們做一列可以直接顯示的utf8的圖標(biāo)列：

這樣也看不全啊，是能顯示出圖標(biāo)，不完整或者太小不清晰，我們要做一個(gè)可視化查詢：

Power BI可視化查詢SVG圖標(biāo)

我們用三個(gè)視覺對象來查詢SVG圖標(biāo)

Chiclet Slicer可以做一個(gè)SVG圖標(biāo)的矩陣列表：

Image Grid制作一個(gè)圖標(biāo)云：

Html Viewer制作單個(gè)圖標(biāo)視圖：

這三個(gè)視覺對象都很簡單，設(shè)置也很容易：

稍有不同的是：

Html Viewer：引用的列是不用聲明utf8編碼的列
其他兩個(gè)視覺對象：引用redutf8列，是utf8編碼的列

就是說，我們要在Power BI 中引用圖標(biāo)，大部分時(shí)候是要utf8編碼的。

單個(gè)SVG圖標(biāo)引用

通過編寫度量值，指向單個(gè)圖標(biāo)：

我們先找一個(gè)要引用的圖標(biāo)名稱：circle-check.svg

我們要用綠色的圖標(biāo)：

ShowGreen="data:image/svg+xml;utf8,"&
CALCULATE(SELECTEDVALUE(svg[green]),'svg'[Name]="circle-check.svg")

我們引用紅色的圖標(biāo)：

ShowRed=CALCULATE(SELECTEDVALUE(svg[redutf8]),'svg'[Name]="circle-check.svg")

應(yīng)為我們有現(xiàn)成的utf8紅色圖標(biāo)所以度量值前面就少了"data:image/svg+xml;utf8,"&

其實(shí)這個(gè)兩個(gè)度量值就代表了這兩個(gè)圖標(biāo)：

我們可以用image形式單個(gè)引用，也可以用在條件格式中引用這兩個(gè)圖標(biāo)：

有了這個(gè)圖標(biāo)集，你就可以有豐富的圖標(biāo)可用，可以自定義大小、顏色，做出更出色的可視化作品。

VG（Scalable Vector Graphics）是一種基于XML的圖像格式，用于定義用于網(wǎng)絡(luò)的矢量圖形。與柵格圖像如PNG或JPG不同，SVG圖像在放大或縮小時(shí)不會失真，這使得它特別適合于網(wǎng)頁設(shè)計(jì)和響應(yīng)式布局。

SVG的優(yōu)點(diǎn)包括：

可縮放性：矢量圖形可以無損放大或縮小。
可編輯性：作為XML文件，SVG可以通過文本編輯器進(jìn)行編輯。
交互性和動(dòng)畫：可以通過CSS和JavaScript增強(qiáng)SVG的交互性和動(dòng)畫效果。
DOM訪問：SVG元素可以通過DOM API進(jìn)行訪問和操作。

如何在HTML中使用SVG？

SVG可以直接嵌入到HTML頁面中，可以作為一個(gè)獨(dú)立的文件被引入，或者作為CSS背景圖像使用。

示例 1：直接嵌入SVG

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>SVG 基礎(chǔ)示例</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>

在這個(gè)例子中，我們創(chuàng)建了一個(gè)簡單的SVG圖形，包括一個(gè)黃色填充的圓，周圍有一個(gè)綠色的邊框。

示例 2：使用SVG文件

首先，創(chuàng)建一個(gè)SVG文件（例如：rectangle.svg）：

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="50" fill="blue" />
</svg>

然后，在HTML文件中引用這個(gè)SVG文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>使用SVG文件</title>
</head>
<body>
    <img src="rectangle.svg" alt="藍(lán)色矩形" />
</body>
</html>

通過<img>標(biāo)簽，我們引入了一個(gè)外部SVG文件。

示例 3：SVG與CSS和JavaScript交互

我們可以使用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('多邊形被點(diǎn)擊!')" />
    </svg>

    <script>
        document.getElementById('myPolygon').addEventListener('click', function() {
            console.log('多邊形被點(diǎn)擊，并且已經(jīng)觸發(fā)了alert。');
        });
    </script>
</body>
</html>

在這個(gè)例子中，我們創(chuàng)建了一個(gè)SVG多邊形，通過CSS為其添加了懸停效果，并通過JavaScript為其添加了點(diǎn)擊事件。

結(jié)論

SVG是一個(gè)強(qiáng)大的工具，適用于現(xiàn)代的網(wǎng)頁設(shè)計(jì)和開發(fā)。通過上述例子，我們可以看到SVG在創(chuàng)建可縮放、可交互圖形方面的能力。隨著技術(shù)的不斷進(jìn)步，SVG將繼續(xù)在Web設(shè)計(jì)中扮演重要角色。

文簡介

點(diǎn)贊 + 關(guān)注 + 收藏=學(xué)會了

技術(shù)一直在演變，在網(wǎng)頁中使用 SVG 的方法也層出不窮。每個(gè)時(shí)期都有對應(yīng)的最優(yōu)解。

所以我打算把我知道的 7種 SVG 的使用方法列舉出來，有備無患~

如果你還知道其他方法，可以在評論區(qū)補(bǔ)充~

1. 在瀏覽器直接打開

<?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 聲明渲染規(guī)則。

所以必須使用 xmlns="http://www.w3.org/2000/svg"。

2. 內(nèi)嵌到 HTML 中（推薦???）

<!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>
    <!-- 內(nèi)嵌到 HTML 中 -->
    <svg width="100%" height="100%" version="1.1">
      <circle cx="50" cy="50" r="50" fill="hotpink"></circle>
    </svg>
  </div>
</body>
</html>

可以看到上面的代碼中，<svg> 標(biāo)簽并沒有使用 xmlns="http://www.w3.org/2000/svg" 聲明命名空間，這是因?yàn)?HTML 5 文檔使用 <!DOCTYPE html> 標(biāo)記，它允許跳過 SVG 命名空間聲明，HTML 解析器會自動(dòng)識別 SVG 元素和它的子元素，除了 <foreignObject> 元素的子元素。

在寫本文時(shí)，將 SVG 內(nèi)嵌到 HTML 中 的做法是最常見的，也是比較推薦的方式之一。

做特效時(shí)，這種使用方式也是比較輕松的。

3. CSS 背景圖（推薦?）

<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 也是一種圖片格式，所以按理說是能當(dāng)做背景圖來使用的。

一試，果然可以~

4. 使用 img 標(biāo)簽引入（推薦?）

<img src="./case1.svg" width="100" height="100">

既然 SVG 可以在 CSS 中當(dāng)背景圖使用，那也可以在 <img> 標(biāo)簽里使用咯~

5. 使用 iframe 標(biāo)簽引入（不推薦?）

<iframe
  src="./case1.svg"
  width="100"
  height="100"
></iframe>

iframe 可以在網(wǎng)頁里再嵌套一個(gè)網(wǎng)頁，既然 SVG 可以直接在瀏覽器打開，那使用 <iframe> 引用 SVG 同樣也是可以的。

需要注意的是，<iframe> 默認(rèn)是有個(gè)邊框樣式的，如果你使用這種方式引入 SVG 可能還需要自己手動(dòng)調(diào)節(jié)一下樣式。

6. 使用 embed 標(biāo)簽引入（不推薦?）

<embed
  src="./case1.svg"
  width="100"
  height="100"
/>

7. 使用 object 標(biāo)簽引入（不推薦?）

<object
  data="./case1.svg"
  type="image/svg+xml"
  codebase="http://www.adobe.com/svg/viewer/install"
></object>

使用 <object> 嵌入 SVG 可以讓那些不能直接顯示 SVG 但又有 SVG 插件的老舊瀏覽器展示 SVG。

需要注意的是，在某些現(xiàn)代瀏覽器中，type 和 codebase 是可以不寫的。

type 用來聲明當(dāng)前引入的資源是屬于什么類型。

總結(jié)

在寫本時(shí)，我推薦使用 內(nèi)嵌到 HTML 的方式來做日常開發(fā)。

其他方式按照你實(shí)際需求去使用即可。

最后的 embed 和 object 這兩種方式可以當(dāng)做備用方案去使用。

代碼倉庫

?雷猴 SVG

整合營銷服務(wù)商