Search code examples
svgpng

Convert shadow in png format to svg

Is it possible to convert this png image

enter image description here

to svg format? I have tried online converters but they are not useful.

I have managed to create shadow with svgicon plugin for leaflet but when I import that svg in figma it doesnt keep its shape.

here is 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>
Solution

  • Here is a simpler handwritten SVG that should do the job. When you include an SVG in another SVG file via the image element, if the dimensions of the image element doesn't match the dimensions of the referred file, the aspect ratio will be changed so it fits the dimensions of the image element.

    If you don't want that to happen, you must specify a "preserveAspectRatio" attribute for the image element. With the preserveAspectRatio element, you can specify how the referred SVG should be positioned within the image element and whether the larger or smaller dimension should be conserved.

    • The positioning is a combination of xMin/xMid/xMax and yMin/yMid/yMax eg. xMidYMid will center the referred image within the image element.
    • The conservation flag is either "slice" - which will fill the image element completely using the smaller dimension of the referred image; or "meet" - which will fit the larger dimension into the image element, padding out the smaller dimension with empty space.

    In your case preserveAspectRatio = "xMidYMid meet" is probably what you want, but you can play around with these options.

    <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>