html - 带有单独 SVG 文件的内联 SVG

Question

我的最终目标是在我的网页上显示我可以轻松调整颜色的图像。

目前我正在使用内联 SVG 来实现；像这样:

        <a href="https://thechymera.tumblr.com">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewbox="0 0 100 100">
        <path class="social" d="M 100,0 0,0 0,100 100,100 z M 71.028,79.925 c -2.886,1.358 -5.506,2.315 -7.848,2.865 -2.344,0.545 -4.877,0.819 -7.599,0.819 -3.092,0 -4.917,-0.388 -7.291,-1.166 -2.375,-0.784 -4.402,-1.902 -6.077,-3.337 -1.681,-1.447 -2.841,-2.986 -3.49,-4.612 -0.65,-1.628 -0.972,-3.99 -0.972,-7.082 l 0,-23.714 -9.187,0 0,-9.576 c 2.655,-0.861 5.736,-2.099 7.626,-3.708 1.899,-1.615 3.418,-3.547 4.564,-5.807 1.149,-2.255 1.938,-5.132 2.369,-8.62 l 9.618,0 0,15.642 15.635,0 0,12.071 -15.637,0 0,17.34 c 0,3.924 -0.051,6.185 0.366,7.297 0.413,1.106 1.447,2.255 2.574,2.919 1.498,0.898 3.207,1.346 5.132,1.346 3.425,0 6.832,-1.112 10.216,-3.338 l 0,10.665 0,-0.004 z"></path>
        </a>

(并在链接的 .css 文件中指定我的颜色:

svg:hover .social { fill: #efa5d6; }
svg .social { fill: #b5b5b5; }

).

我得到 d="<...>"值 cat查看我的 SVG 文件。

我对这种方法的提示是:

我不从可编辑源加载图像。如果我想更改图片中的细节，我不能直接编辑 HTML。我要么必须将路径值复制到新的 SVG 文件中，要么将准确对应的 SVG 文件记录在案。完成编辑后，我不能只是 rsync并依赖于我的 HTML 仍然指向同一个文件这一事实，而我也必须编辑 HTML 并粘贴路径值。这很容易为我的工作流程添加 2-1000 个进一步的步骤，这对于像我这样反复试验的设计师来说非常重要。

有没有办法保留内联 SVG 提供的功能(如上所示)和广泛支持，而不是实际上内联 SVG，而是从不同的位置加载它？

Answer 1

是的。我以前采用的方法是使用服务器端脚本将 SVG 文件包含到页面上的元素中，如下所示:

<div id="my-svg-image">
    <?php include "image.svg"; ?>
</div>

通过包装它，我可以使用 CSS 定位特定的 SVG，而不必知道文件是否包含 ID，或者专门定位图像的实例。虽然我还没有尝试过，但按理说可以发出某种类似 AJAX 的请求来获取 SVG。