在Power BI中使用SVG图像：第1部分

我将演示将HTML Viewer与基于矢量的动态图像一起使用的其他方法：

• 第1部分（本文）–如何使用和修改  SVG图像，而不是PNG，JPEG等。
• 第2部分（此处）–如何快速将数百个开源SVG图标添加到Power BI（无论是帮助使用书签还是极大地扩展您的图表垃圾库）。

SVG –可缩放矢量图形

这篇文章中的示例图像是SVG。作为矢量图像，无论视觉容器的大小如何，它们都将缩放并保持相同的质量。相对于PNG或JPEG等格式，当您放大图像尺寸时，它们看起来可能会变形，因此具有优势。

除非您碰巧可以访问Adobe Illustrator，否则可以使用称为Inkscape的免费开放源代码应用程序创建或转换自己的SVG图像。

拥有SVG文件后，在文本编辑器中将其打开。这是我从Font Awesome获得的示例条形图图标， 它以图像和文本形式出现。

<path>中所有的垃圾是什么？有比此博客文章更好的参考，可以帮助解释SVG的来龙去脉。为了在Power BI中使用，除非您希望发生疯狂的事情，否则请不要修改与viewBox 或  <path>有关的任何内容。对于我要演示的内容，请复制并粘贴从<svg>到</ svg>标签的所有内容。可以将其放入数据源中然后导入，或者使用Power BI中的Enter Data功能。

接下来，将HTML Viewer定制视觉效果添加到Power BI报表中，并将包含SVG数据的列添加到视觉效果。您会在左侧看到类似的视觉效果。

发生了什么？请注意，默认高度1792像素和宽度2048像素如何远远超出可视容器的尺寸。要解决此问题，请将宽度和高度的文本都更改为90vh（HTML查看器的垂直高度的90％）。现在，当您在Power BI中调整视觉尺寸时，它将动态缩放。您可以使用此值，但我选择90vh，因为100vh会溢出并始终显示滚动条，而在Power BI中可视尺寸较小时95vh会显示滚动条。

那更好！这是事情变得有趣的地方。如果要更改颜色怎么办？只需将填充属性添加  到SVG。

透明度？使用  fill-opacity。

这些图像修改都无需借助外部图像编辑软件进行，而仅仅是修改文本即可。

一旦按照您想要的方式设置了SVG，您甚至可以在顶部放置一个透明的Shape并创建一个Bookmark链接！

即使只使用单个图像进行小规模生产，也希望您能看到在Power BI中使用SVG图像的一些优点。如果您仅添加单个图像，则可能看起来需要做很多工作……在第2部分中，我将研究如何快速利用上述某些修改来构建包含数百个SVG图标的数据集，您也可以对其进行修改一起使用Power BI。尝试一次更改数百个静态PNG文件，您会发现它不会像SVG一样简单！

继续阅读第2部分...