解决Google Tag Manager自定义HTML标签中SVG嵌入错误
本文旨在解决google tag manager自定义html标签中直接嵌入svg代码导致的“invalid html, css, or javascript”错误。我们将探讨gtm对svg的限制，并提供两种有效的解决方案：通过将svg转换为data uri格式，利用标签或css background-image属性进行嵌入，从而确保代码在gtm中正确运行。
GTM自定义HTML标签与SVG嵌入挑战
在使用Google Tag Manager (GTM) 的“自定义HTML”标签功能时，开发者常会尝试嵌入包含HTML、CSS和JavaScript的复杂结构，例如自定义横幅或弹窗。然而，当这些结构中直接包含SVG（Scalable Vector Graphics）标记时，GTM可能会报告一个“Invalid HTML, CSS, or JavaScript found in template”的错误。
这个错误通常不是因为SVG代码本身语法有误，而是GTM的内部解析和安全机制对直接嵌入的SVG标记有严格的限制。GTM的模板引擎可能无法正确处理或验证内联的
考虑以下原始问题中的代码片段，其中包含了一个直接嵌入的SVG图标：
为了解决这一问题，我们需要避免直接在GTM的自定义HTML标签中插入结构，而是采用将SVG内容转换为Data URI的形式。
解决方案一：SVG转Data URI嵌入标签
最常见的解决方案是将SVG代码转换为Base64编码的Data URI字符串，然后将其作为标签的src属性值。这种方法将SVG视为一个图像文件，绕过了GTM对直接SVG标记的解析限制。
操作步骤：
- 获取SVG代码： 复制你需要嵌入的完整SVG代码。
- 转换为Data URI (Base64编码)： 使用在线工具（例如：davidgierth.de/tools/svg-to-data-uri/ 或其他SVG to Base64编码器）将SVG代码转换为data:image/svg+xml;base64,...格式的字符串。
- 嵌入标签： 将生成的Data URI字符串放入标签的src属性中。
示例代码：
假设原始SVG代码经过Base64编码后得到如下Data URI（此处为示例SVG的实际编码结果）：
data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0
