Javascript 如何嵌入独立的SVG代码？

我有一个带有SVG输出的javascript库。为了简单起见，比如说

line(color).

所以

line('red')

输出

<svg>
  <style>
    .color {
      stroke: red;
    }
  </style>
  <line class="color" x1="0" y1="0" x2="100" y2="100">
</svg>

---

解决这个问题的一种方法是将SVG嵌入到

iframe

s中。然而，我读到iframe只能少量使用，因为它们在计算上很昂贵。也许有某种方法可以将带有JavaScript的SVC代码转换为数据URI，并在

对象中使用它？或者如何在网站中最好地使用这些不同的SVG？
通过与Robert Longson的有益讨论，我发现至少有两种方法可以为上面的SVG代码获得SVG标准：使用
img
标记，我相信这会使SVG的行为类似于位图，并使用
对象
标记。详情如下

或者，使用img并将SVG代码设置为数据：

<img src='data:image/svg+xml;utf8,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" height="100px" width="100px">
  <style>
    .color {
      stroke: red;
    }
  </style>
  <line class="color" x1="0" y1="0" x2="100" y2="100"/>
</svg>' alt="" />
<img src='data:image/svg+xml;utf8,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" height="100px" width="100px">
  <style>
    .color {
      stroke: blue;
    }
  </style>
  <line class="color" x1="0" y1="0" x2="100" y2="100"/>
</svg>' alt="" />


注意在URI中有一些字符至少有些浏览器无法解释。例如，firefox不允许散列（
#
），这在SVG
url（）
定义中很常见，必须用
%23
替换。我想一种保存方法是使用JavaScript
encodeURIComponent（）
对SVG进行正确编码。
修复库，使其创建唯一的类名。性能测试iFrame，而不是依赖于您阅读的可能错误的随机内容。@RobertLongson，谢谢。不幸的是，我无法修复库。所以这是不可能的。所以，你认为iFrame毕竟没那么糟糕。我猜I帧的另一个问题是它们不能很好地适应SVG的尺寸，对吗？@RobertLongson，我希望是这样。至少这是我的意图。然而，我也特别感兴趣的是SVG代码。我想，也许有一些替代方案特别适合显示SVG。我很乐意听取您的建议。不清楚您在使用iframe或object标记时有什么问题（除了毫无根据的不情愿）。我建议也放弃javascript库，它显然不适合使用。@RobertLongson谢谢。因此，iFrame不容易适应嵌入代码的维度，并且需要URI而不是普通SVG代码的对象标记的问题不是问题。好吧，那我一定是误解了那些标签，必须对它们做更多的阅读。我会建议关闭这个帖子。对不起，吵闹了。
<img src='data:image/svg+xml;utf8,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" height="100px" width="100px">
  <style>
    .color {
      stroke: red;
    }
  </style>
  <line class="color" x1="0" y1="0" x2="100" y2="100"/>
</svg>' alt="" />
<img src='data:image/svg+xml;utf8,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" height="100px" width="100px">
  <style>
    .color {
      stroke: blue;
    }
  </style>
  <line class="color" x1="0" y1="0" x2="100" y2="100"/>
</svg>' alt="" />

<object type="image/svg+xml" data='data:image/svg+xml;utf8,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" height="100px" width="100px">
  <style>
    .color {
      stroke: red;
    }
  </style>
  <line class="color" x1="0" y1="0" x2="100" y2="100"/>
</svg>'>
</object>
<object type="image/svg+xml" data='data:image/svg+xml;utf8,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" height="100px" width="100px">
  <style>
    .color {
      stroke: blue;
    }
  </style>
  <line class="color" x1="0" y1="0" x2="100" y2="100"/>
</svg>'>
</object>