将png格式的阴影转换为svg

Question

转svg格式？我尝试过在线转换器，但它们没有用。

我已经成功地使用 svgicon 插件为传单创建了阴影，但是当我在 figma 中导入该 svg 时，它无法保持其形状。

这里是 svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" style="width:40px; height:72">
  <filter id="iconShadowBlur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="0.5"></feGaussianBlur>
  </filter>
  <path filter="url(#iconShadowBlur)" class="svg-icon-shadow" d="M 1 16 L 16 46 L 31 16 A 8 8 0 0 0 1 16 Z" fill="rgb(0,0,10)" stroke-width="2" stroke="rgb(0,0,10)" style="opacity: 0.5; transform-origin: 16px 48px; transform: rotate(5deg) translate(0px, 0px) scale(1, 0.5)"></path>
  <path class="svg-icon-path" d="M 1 16 L 16 46 L 31 16 A 8 8 0 0 0 1 16 Z" stroke-width="2" stroke="rgb(0,102,255)" stroke-opacity="1" fill="rgb(0,102,255)" fill-opacity="1"></path>
</svg>

Answer 1

不幸的是，如果 Figma 不支持过滤器，那么实际上没有任何好的替代解决方案。

我想你可以将一堆不同的形状分层你可以将一堆半透明的形状分层。但这有点老套。

.small {
  width: 24px;
}

<svg class="small" viewBox="0 0 24 24">
  <g fill="black">
    <circle cx="12" cy="12" r="12" fill-opacity="0.05"/>
    <circle cx="12" cy="12" r="11" fill-opacity="0.1"/>
    <circle cx="12" cy="12" r="10" fill-opacity="0.1"/>
    <circle cx="12" cy="12" r="9" fill-opacity="0.2"/>
    <circle cx="12" cy="12" r="8" fill-opacity="0.2"/>
    <circle cx="12" cy="12" r="7" fill-opacity="0.3"/>
    <circle cx="12" cy="12" r="6"/>
  </g>
</svg>

<svg viewBox="0 0 24 24">
  <g fill="black">
    <circle cx="12" cy="12" r="12" fill-opacity="0.05"/>
    <circle cx="12" cy="12" r="11" fill-opacity="0.1"/>
    <circle cx="12" cy="12" r="10" fill-opacity="0.1"/>
    <circle cx="12" cy="12" r="9" fill-opacity="0.2"/>
    <circle cx="12" cy="12" r="8" fill-opacity="0.2"/>
    <circle cx="12" cy="12" r="7" fill-opacity="0.3"/>
    <circle cx="12" cy="12" r="6"/>
  </g>
</svg>

Answer 2

这是一个更简单的手写 SVG，应该可以完成这项工作。当您通过图像元素将 SVG 包含在另一个 SVG 文件中时，如果图像元素的尺寸与引用文件的尺寸不匹配，则宽高比将更改以适合图像元素的尺寸。

如果您不希望发生这种情况，则必须为图像元素指定一个“preserveAspectRatio”属性。使用 preserveAspectRatio 元素，您可以指定引用的 SVG 在图像元素中的定位方式以及是否应保留较大或较小的尺寸。

定位是组合 xMin/xMid/xMax 和 yMin/yMid/yMax 例如。 xMidYMid 将使引用的图像在图像元素中居中。
保护标志是“切片”——它将使用所引用图像的较小尺寸完全填充图像元素；或 "meet" - 将较大的尺寸适合图像元素，用空 space.

在你的情况下，preserveAspectRatio = "xMidYMid meet" 可能是你想要的，但你可以使用这些选项。

<svg xmlns="http://www.w3.org/2000/svg" width="50px" height="20px" viewBox="0 0 50 20">
  <defs>
    <filter id="blur" filterUnits="userSpaceOnUse">
      <feGaussianBlur stdDeviation="2"/>
    </filter>
  </defs>
  
  <g filter="url(#blur)">
  <circle fill="#888" cx="20" cy="10" r="5"/>
  <polygon fill="#888" points="20,5 40,5 20,15z"/>
  </g>
</svg>

将png格式的阴影转换为svg

Convert shadow in png format to svg

svg

png