如何在 img 标签所在的位置显示此 SVG 图像

Question

我收到了一个包含以下内容的 SVG 文件（黑色的加号图标）：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="1460px" height="610px" viewBox="0 0 1460 610" enable-background="new 0 0 1460 610" xml:space="preserve">
<g>
    <path d="M746.602,304h-16v-16H729v16h-16v1.602h16v16h1.602v-16h16V304z M746.602,304"/>
</g>
</svg>

我想在带有以下标签的页面中显示它：

<img src="plus-icon-black.svg">

但是加号显示的位置离 img 标签的位置很远。

如何在img标签所在的位置显示svg图片？

Answer 1

您的 SVG 图像被保存在 + 形状周围的大量空白处。

这是一个干净的版本：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="449.1 991.8 33.6 33.6">
  <path d="M482.7 1007.8h-16v-16h-1.6v16h-16v1.6h16v16h1.6v-16h16v-1.6z"/>
</svg>

您可以使用 CSS 或使用 <img> width 或 height 属性来控制大小。在 Illustrator 中导出为 SVG 时，请将画板尺寸缩小到形状的边界框。