Power BI Desktop中SVG图标集的引用

Power BI Desktop中SVG图标集的引用实践

们在做数据可视化的时候，经常会用到图标，SVG可缩放矢量图标是最佳选择，网络中有很多资源，今天我们介绍建立一个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>

我们只需要三个参数：

width:图标的宽度，数值是绝对大小，可以相对大小用vh
height:图标的高度，数值是绝对大小，可以相对大小用vh
fill:图标的填充颜色，可以用英文名称，可以是颜色编码#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>

做了上述修改：这个图标就会是一个８０＊８０的红色的图标。

SVG资源

SVG资源网络上可以找到很多，推荐这个网站的223个应该够用了，这个网站是MIT license可以放心使用。

下载图标并解压出svg目录：

到这里我们就把准备工作做好了。

导入SVG图标

用Power Query从文件夹导入SVG图标：

解码二进制：

把二进制解码成Base64：

DAX中的准备工作：

把上面的图标集加载到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的图标列：

这样也看不全啊，是能显示出图标，不完整或者太小不清晰，我们要做一个可视化查询：

Power BI可视化查询SVG图标

我们用三个视觉对象来查询SVG图标

Chiclet Slicer可以做一个SVG图标的矩阵列表：

Image Grid制作一个图标云：

Html Viewer制作单个图标视图：

这三个视觉对象都很简单，设置也很容易：

稍有不同的是：

Html Viewer：引用的列是不用声明utf8编码的列
其他两个视觉对象：引用redutf8列，是utf8编码的列

就是说，我们要在Power BI 中引用图标，大部分时候是要utf8编码的。

单个SVG图标引用

通过编写度量值，指向单个图标：

我们先找一个要引用的图标名称：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的优点包括：

可缩放性：矢量图形可以无损放大或缩小。
可编辑性：作为XML文件，SVG可以通过文本编辑器进行编辑。
交互性和动画：可以通过CSS和JavaScript增强SVG的交互性和动画效果。
DOM访问：SVG元素可以通过DOM API进行访问和操作。

如何在HTML中使用SVG？

SVG可以直接嵌入到HTML页面中，可以作为一个独立的文件被引入，或者作为CSS背景图像使用。

示例 1：直接嵌入SVG

<!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图形，包括一个黄色填充的圆，周围有一个绿色的边框。

示例 2：使用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文件。

示例 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('多边形被点击!')" />
    </svg>

    <script>
        document.getElementById('myPolygon').addEventListener('click', function() {
            console.log('多边形被点击，并且已经触发了alert。');
        });
    </script>
</body>
</html>

在这个例子中，我们创建了一个SVG多边形，通过CSS为其添加了悬停效果，并通过JavaScript为其添加了点击事件。

结论

SVG是一个强大的工具，适用于现代的网页设计和开发。通过上述例子，我们可以看到SVG在创建可缩放、可交互图形方面的能力。随着技术的不断进步，SVG将继续在Web设计中扮演重要角色。

文简介

点赞 + 关注 + 收藏=学会了

技术一直在演变，在网页中使用 SVG 的方法也层出不穷。每个时期都有对应的最优解。

所以我打算把我知道的 7种 SVG 的使用方法列举出来，有备无患~

如果你还知道其他方法，可以在评论区补充~

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 声明渲染规则。

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

2. 内嵌到 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>
    <!-- 内嵌到 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 中 的做法是最常见的，也是比较推荐的方式之一。

做特效时，这种使用方式也是比较轻松的。

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 也是一种图片格式，所以按理说是能当做背景图来使用的。

一试，果然可以~

4. 使用 img 标签引入（推荐?）

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

既然 SVG 可以在 CSS 中当背景图使用，那也可以在 <img> 标签里使用咯~

5. 使用 iframe 标签引入（不推荐?）

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

iframe 可以在网页里再嵌套一个网页，既然 SVG 可以直接在浏览器打开，那使用 <iframe> 引用 SVG 同样也是可以的。

需要注意的是，<iframe> 默认是有个边框样式的，如果你使用这种方式引入 SVG 可能还需要自己手动调节一下样式。

6. 使用 embed 标签引入（不推荐?）

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

7. 使用 object 标签引入（不推荐?）

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

使用 <object> 嵌入 SVG 可以让那些不能直接显示 SVG 但又有 SVG 插件的老旧浏览器展示 SVG。

需要注意的是，在某些现代浏览器中，type 和 codebase 是可以不写的。

type 用来声明当前引入的资源是属于什么类型。

总结

在写本时，我推荐使用 内嵌到 HTML 的方式来做日常开发。

其他方式按照你实际需求去使用即可。

最后的 embed 和 object 这两种方式可以当做备用方案去使用。

代码仓库

?雷猴 SVG

整合营销服务商