SVG file resizes when exporting from adobe xd-CodePudding

Hello

I am developing a react app and I want to set a SVG for my header background. But when I export it from adobe XD it's size will change.

This is the SVG code :

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1970.909" height="211.264" viewBox="0 0 1970.909 211.264">
      <defs>
        <filter id="Path_7" x="0" y="0" width="1970.909" height="211.264" filterUnits="userSpaceOnUse">
          <feOffset dy="6" input="SourceAlpha"/>
          <feGaussianBlur stdDeviation="8.5" result="blur"/>
          <feFlood flood-color="#396eb0" flood-opacity="0.278"/>
          <feComposite operator="in" in2="blur"/>
          <feComposite in="SourceGraphic"/>
        </filter>
      </defs>
      <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#Path_7)">
        <path id="Path_7-2" data-name="Path 7" d="M0,0,1919.909.341V159.89s-164.931-36.264-428.15-36.264-349.451,32.555-624.725,36.264-259.615-21.429-476.374-21.429S0,159.89,0,159.89Z" transform="translate(25.5 19.5)" fill="#f05454"/>
      </g>
    </svg>

This is a link to image

Edit: I can resize my SVG in adobe illustrator and every thing is fine , but I want to export and use directly from adobe XD

CodePudding user response：

If you remove the width and height attributes from both the svg element and the filter element, then it will scale normally:

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1970.909 211.264">
      <defs>
        <filter id="Path_7" x="0" y="0" filterUnits="userSpaceOnUse">
          <feOffset dy="6" input="SourceAlpha"/>
          <feGaussianBlur stdDeviation="8.5" result="blur"/>
          <feFlood flood-color="#396eb0" flood-opacity="0.278"/>
          <feComposite operator="in" in2="blur"/>
          <feComposite in="SourceGraphic"/>
        </filter>
      </defs>
      <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#Path_7)">
        <path id="Path_7-2" data-name="Path 7" d="M0,0,1919.909.341V159.89s-164.931-36.264-428.15-36.264-349.451,32.555-624.725,36.264-259.615-21.429-476.374-21.429S0,159.89,0,159.89Z" transform="translate(25.5 19.5)" fill="#f05454"/>
      </g>
    </svg>

CodePudding user response：

I feel that this SVG could be optimized a bit. The path itself is fairly simple. So, in this example I scaled down the path. Now the numbers in the path are easier to overview. Then the viewBox can be simple as well. And now the filter is also more controllable.

PS: in your code you have two elements with the same id. That should be avoided.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 5">
  <defs>
    <filter id="Path_7" filterUnits="userSpaceOnUse">
      <feOffset dy=".5" input="SourceAlpha"/>
      <feGaussianBlur stdDeviation=".2" result="blur"/>
      <feFlood flood-color="#396eb0" flood-opacity=".6"/>
      <feComposite operator="in" in2="blur"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
  <path filter="url(#Path_7)" data-name="Path 7" d="M 0 0 L 36 0 V 3 s -3 -0.5 -7 -0.5 s -7 0.5 -11 0.5 s -7 -0.5 -11 -0.5 S 0 3 0 3 Z" fill="#f05454"/>
</svg>