如何处理带有 ID 的 Sketch 导出 SVG

Question

我想在我的页面中使用 svg 图标。与我合作的设计师使用 Sketch 设计图像并将结果导出为 svg。 Sketch 在导出的代码中添加各种id 标签（注意id="Page-1"、id="My-Star" 和id="Star-1" 属性）：

<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="My-Star" stroke="#979797" fill="#D8D8D8">
                <polygon id="Star-1" points="11.9860934 18.5835921 5.4876995 22 6.7287823 14.763932 1.47147118 9.63932023 8.73689646 8.58359214 11.9860934 2 15.2352904 8.58359214 22.5007157 9.63932023 17.2434045 14.763932 18.4844873 22 "></polygon>
            </g>
        </g>
    </svg>

我将 svg 直接包含在 html 中。通过这样做，我多次介绍相同的id。除了这种工作方式导致的无效 html 之外，我还需要根据 ids 设置 svg 元素的样式。这是一种不好的做法。

我使用 css 来设置 svgs 的样式，看看 example

问题：
从 Sketch 导出 svg 时，有没有办法用 classes 替换 ids？我可以给设计师一些插件或设置吗？ 如果不是，从设计师那里接收 svg 资产并在页面中使用它的最佳工作流程是什么？

Answer 1

如果您要处理通过 Sketch 导出的 SVG，我强烈建议您将 svgo 添加到您的工作流程中。该工具不仅会消除未使用的 ID（您仍然需要手动解析 SVG 使用的 ID），它还将比默认的 SVG 导出更好地优化 SVG。 p>

如果您经常这样做，请将 SVGO 添加到您的开发/构建过程中（请参阅 examples）；但是，如果您只是想将其用于测试运行，还有一个基于 Web 的 GUI：https://jakearchibald.github.io/svgomg/

Answer 2

除了要求设计师使用唯一的组名之外，似乎没有其他好的解决方案。

组名成为生成的 SVG 中的组 ID。

Answer 3

我没有在 Sketch 本身中找到任何解决方案，但我发现了一个使用 PHP 的简单解决方案。在 Sketch 中，我将我想要的每个组或路径命名为以 .点，例如.person，然后导出文件。显然群里还有id=".person"

然后我使用 PHP 将 .svg 加载到页面中，并按类替换所有以点开头的 ID： <?php echo str_replace('id=".', 'class="', file_get_contents( 'sample.svg' )); ?>

我知道这并不理想，但适用于我的情况。

Answer 4

我通过为每个 SVG 中包含的 ID 添加不同的前缀来修复它。为了避免故障，它会隐藏 SVG，直到将前缀添加到 ID。

CSS：

    svg {
        opacity: 0;
        transition: opacity .5s ease-in-out;
    }
    svg.svg-visible {
        opacity: 1;
    }

JS：

    function replaceAll(str, find, replace) {
      var escapedFind=find.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
      return str.replace(new RegExp(escapedFind, 'g'), replace);
    }
    
    var svgCounter = 0;
    
    [].forEach.call(document.querySelectorAll('svg'), function(el) {
      var contentReplaced = replaceAll(el.innerHTML,'id="','id="n' + svgCounter); 
      contentReplaced = replaceAll(contentReplaced,'url(#','url(#n' + svgCounter);
      contentReplaced = replaceAll(contentReplaced,'xlink:href="#','xlink:href="#n' + svgCounter);
      el.innerHTML = contentReplaced;
      el.classList.add('svg-visible');
      svgCounter++;
    })

您还可以使用 PHP 使其更简洁：

    function inlinesvg($module, $svg) {
        $id = 'svg-' . substr(md5(uniqid(mt_rand(), true)) , 0, 8);
        $file_contents = file_get_contents('./assets/img/'.$module.'/'.$svg.'.svg');
        $file_contents = str_replace('id="','id="' . $id, $file_contents);
        $file_contents = str_replace('url(#','url(#' . $id, $file_contents);
        $file_contents = str_replace('xlink:href="#','xlink:href="#' . $id, $file_contents);
        echo $file_contents;
    }

Answer 5

我遇到了同样的问题，所以做了一个插件。使用这个插件，从切片导出的 svg 中的所有 id 都以 BEM 样式命名。

https://github.com/Knowre-Dev/svg-namespacing