CSS SVG+XML - 如何编辑？答案

【问题标题】：CSS SVG+XML - how to edit?CSS SVG+XML - 如何编辑？
【发布时间】：2017-08-02 19:31:44
【问题描述】：

如何使用可视化工具编辑 xml svg？有什么在线工具吗？

我有这个 xml 格式的 svg，我从某处复制了它：

data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E

我想把它的颜色改成黑色或其他颜色。

.item>a::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  margin-top: -2.5px;
  top: 22.5px;
  border: 1px solid #000;
}

<ul>
  <li class="item"><a href="#" class="item">One</a></li>
</ul>

有什么想法吗？

【问题讨论】：

最明显的选择是 Inkscape，但它是一个桌面程序。在任何情况下，推荐工具或库的问题在这里都是明确的题外话。
@ÁlvaroGonzález 我用data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2‌F%2Fwww.w3.org%2F200‌0%2Fsvg'%20viewBox%3‌D'0%200%2027%2044'%3‌E%3Cpath%20d%3D'M27%‌2C22L27%2C22L5%2C44l‌-2.1-2.1L22.8%2C22L2‌.9%2C2.1L5%2C0L27%2C‌22L27%2C22z'%20fill%‌3D'%23007aff'%2F%3E%‌3C%2Fsvg%3E 尝试了它并在 inskcape 中打开它，但出现错误。
嗯，这是一个数据 URI。您是要绘图工具还是要如何将数据 URI 解码为常规文件？

标签： css xml svg

【解决方案1】：

将其粘贴到名为 something.svg 的文本文件中，然后在 Adobe Illustrator 中打开该文件。或者您可以将 svg 转换为 jpg/png 并在 photoshop 中进行编辑。 convert here

【讨论】：

在 .svg 中粘贴什么？我用data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E 试了一下，在 inskcape 中打开了，但出现错误。
您使用的代码不是 SVG，它是 base64。在此处将 base64 转换为 jpg：codebeautify.org/base64-to-image-converter