0

When importing this SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" fill="none" id="f_icon_1f2d0f1a">
    <g filter="url(#f_icon_1f2d0f1a_filter0_i)">
        <path d="M13.865 4.666a.936.936 0 0 1 .662-.274h12.924c.249 0 .487.098.662.274l9.14 9.139a.936.936 0 0 1 .273.662V27.39a.936.936 0 0 1-.274.662l-9.139 9.139a.936.936 0 0 1-.662.274H14.527a.936.936 0 0 1-.662-.274l-9.139-9.139a.936.936 0 0 1-.274-.662V14.467c0-.248.099-.487.274-.662l9.14-9.139z" fill="url(#f_icon_1f2d0f1a_paint0_linear)"></path>
    </g>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.222 4.636l-9.585 9.586v13.556l9.585 9.585h13.556l9.585-9.585V14.222l-9.585-9.586H14.222zM13.447.892c-.497 0-.973.197-1.324.548L1.44 12.122a1.872 1.872 0 0 0-.548 1.324v15.107c0 .497.197.973.548 1.324l10.683 10.682c.35.351.827.549 1.324.549h15.106c.497 0 .973-.198 1.324-.549L40.56 29.877c.35-.351.548-.827.548-1.324V13.446c0-.496-.197-.973-.548-1.324L29.877 1.44a1.872 1.872 0 0 0-1.324-.548H13.446z" fill="url(#f_icon_1f2d0f1a_paint1_linear)"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.222 4.636l-9.585 9.586v13.556l9.585 9.585h13.556l9.585-9.585V14.222l-9.585-9.586H14.222zM13.447.892c-.497 0-.973.197-1.324.548L1.44 12.122a1.872 1.872 0 0 0-.548 1.324v15.107c0 .497.197.973.548 1.324l10.683 10.682c.35.351.827.549 1.324.549h15.106c.497 0 .973-.198 1.324-.549L40.56 29.877c.35-.351.548-.827.548-1.324V13.446c0-.496-.197-.973-.548-1.324L29.877 1.44a1.872 1.872 0 0 0-1.324-.548H13.446z" fill="url(#f_icon_1f2d0f1a_paint2_linear)" fill-opacity=".3"></path>
    <g filter="url(#f_icon_1f2d0f1a_filter1_d)">
        <path d="M32.324 17.505l-5.943 4.349-1.203-3.722a.559.559 0 0 1 .532-.731h6.58c.056 0 .079.071.034.104z" fill="url(#f_icon_1f2d0f1a_paint3_linear)"></path>
        <path d="M32.324 17.505l-5.943 4.349-1.203-3.722a.559.559 0 0 1 .532-.731h6.58c.056 0 .079.071.034.104z" fill="url(#f_icon_1f2d0f1a_paint4_linear)" fill-opacity=".2"></path>
        <path d="M32.324 17.505l-5.943 4.349-1.203-3.722a.559.559 0 0 1 .532-.731h6.58c.056 0 .079.071.034.104z" fill="url(#f_icon_1f2d0f1a_paint5_linear)" fill-opacity=".3"></path>
        <path d="M21.06 9.26c.021-.065.098.006.12.072l6.896 21.344.001.006c.01.05-.045.089-.088.06v-.002L9.903 17.505c-.044-.033-.021-.104.034-.104h8.455a.057.057 0 0 0 .054-.04l2.613-8.1z" fill="url(#f_icon_1f2d0f1a_paint6_linear)"></path>
        <path d="M21.06 9.26c.021-.065.098.006.12.072l6.896 21.344.001.006c.01.05-.045.089-.088.06v-.002L9.903 17.505c-.044-.033-.021-.104.034-.104h8.455a.057.057 0 0 0 .054-.04l2.613-8.1z" fill="url(#f_icon_1f2d0f1a_paint7_linear)" fill-opacity=".2"></path>
        <path d="M21.06 9.26c.021-.065.098.006.12.072l6.896 21.344.001.006c.01.05-.045.089-.088.06v-.002L9.903 17.505c-.044-.033-.021-.104.034-.104h8.455a.057.057 0 0 0 .054-.04l2.613-8.1z" fill="url(#f_icon_1f2d0f1a_paint8_linear)" fill-opacity=".3"></path>
        <path d="M17.033 24.138a.559.559 0 0 0-.862.28l-2.018 6.258c-.017.053.043.097.087.064l5.907-4.323-3.114-2.279z" fill="url(#f_icon_1f2d0f1a_paint9_linear)"></path>
        <path d="M17.033 24.138a.559.559 0 0 0-.862.28l-2.018 6.258c-.017.053.043.097.087.064l5.907-4.323-3.114-2.279z" fill="url(#f_icon_1f2d0f1a_paint10_linear)" fill-opacity=".2"></path>
        <path d="M17.033 24.138a.559.559 0 0 0-.862.28l-2.018 6.258c-.017.053.043.097.087.064l5.907-4.323-3.114-2.279z" fill="url(#f_icon_1f2d0f1a_paint11_linear)" fill-opacity=".3"></path>
    </g>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M32.324 17.505c.045-.033.022-.104-.033-.104H25.71c-.38 0-.649.37-.532.73l1.203 3.723 5.943-4.35zm-1.29.364H25.71a.09.09 0 0 0-.087.119l1.005 3.106 4.406-3.225zM21.06 9.26l-2.613 8.101a.057.057 0 0 1-.054.04H9.938c-.055 0-.078.071-.034.104L27.947 30.71l.007.005.034.025.002.001c.042.03.098-.01.087-.059v-.003l-.001-.003-.013-.038L21.18 9.331a.172.172 0 0 0-.018-.04c-.032-.049-.084-.084-.101-.032zm.049 1.375l6.131 18.978-16.045-11.744h7.198c.23 0 .43-.15.5-.364M14.24 30.74c-.044.033-.104-.011-.087-.064l.012-.039 2.006-6.22a.559.559 0 0 1 .862-.279l3.114 2.279-5.907 4.323zm.747-1.127l4.368-3.196-2.598-1.901a.09.09 0 0 0-.14.045l-1.63 5.052z" fill="url(#f_icon_1f2d0f1a_paint12_linear)" fill-opacity=".2"></path>
    <defs>
        <filter id="f_icon_1f2d0f1a_filter0_i" x="4.452" y="4.392" width="33.074" height="34.478" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
            <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
            <feOffset dy="1.404"></feOffset>
            <feGaussianBlur stdDeviation=".936"></feGaussianBlur>
            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"></feComposite>
            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0"></feColorMatrix>
            <feBlend in2="shape" result="effect1_innerShadow"></feBlend>
        </filter>
        <filter id="f_icon_1f2d0f1a_filter1_d" x="7.541" y="7.362" width="27.147" height="26.198" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
            <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix>
            <feOffset dy=".468"></feOffset>
            <feGaussianBlur stdDeviation="1.17"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0"></feColorMatrix>
            <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend>
            <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"></feBlend>
        </filter>
        <linearGradient id="f_icon_1f2d0f1a_paint0_linear" x1="14.139" y1="4.392" x2="14.139" y2="39.645" gradientUnits="userSpaceOnUse">
            <stop stop-color="#732600"></stop>
            <stop offset="1" stop-color="#260D00"></stop>
            <stop offset="1" stop-color="#401500"></stop>
        </linearGradient>
        <linearGradient id="f_icon_1f2d0f1a_paint1_linear" x1="12.671" y1=".892" x2="29.329" y2="41.108" gradientUnits="userSpaceOnUse">
            <stop stop-color="#FD6E35"></stop>
            <stop offset="1" stop-color="#F50"></stop>
        </linearGradient>
        <linearGradient id="f_icon_1f2d0f1a_paint2_linear" x1="-1.82" y1="-2.013" x2="21.114" y2="20.922" gradientUnits="userSpaceOnUse">
            <stop stop-color="red"></stop>
            <stop offset="1" stop-color="red" stop-opacity="0"></stop>
        </linearGradient>
        <linearGradient id="f_icon_1f2d0f1a_paint3_linear" x1="21.114" y1="9.221" x2="21.114" y2="30.751" gradientUnits="userSpaceOnUse">
            <stop stop-color="#FD6E35"></stop>
            <stop offset="1" stop-color="#F50"></stop>
        </linearGradient>
        <linearGradient id="f_icon_1f2d0f1a_paint4_linear" x1="21.114" y1="9.221" x2="21.114" y2="15.54" gradientUnits="userSpaceOnUse">
            <stop stop-color="#fff"></stop>
            <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
        </linearGradient>
        <linearGradient id="f_icon_1f2d0f1a_paint5_linear" x1="14.778" y1="5.151" x2="20.733" y2="20.152" gradientUnits="userSpaceOnUse">
            <stop stop-color="red"></stop>
            <stop offset="1" stop-color="red" stop-opacity="0"></stop>
        </linearGradient>
        <linearGradient id="f_icon_1f2d0f1a_paint6_linear" x1="21.114" y1="9.221" x2="21.114" y2="30.751" gradientUnits="userSpaceOnUse">
            <stop stop-color="#FD6E35"></stop>
            <stop offset="1" stop-color="#F50"></stop>
        </linearGradient>
        <linearGradient id="f_icon_1f2d0f1a_paint7_linear" x1="21.114" y1="9.221" x2="21.114" y2="15.54" gradientUnits="userSpaceOnUse">
            <stop stop-color="#fff"></stop>
            <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
        </linearGradient>
        <linearGradient id="f_icon_1f2d0f1a_paint8_linear" x1="14.778" y1="5.151" x2="20.733" y2="20.152" gradientUnits="userSpaceOnUse">
            <stop stop-color="red"></stop>
            <stop offset="1" stop-color="red" stop-opacity="0"></stop>
        </linearGradient>
        <linearGradient id="f_icon_1f2d0f1a_paint9_linear" x1="21.114" y1="9.221" x2="21.114" y2="30.751" gradientUnits="userSpaceOnUse">
            <stop stop-color="#FD6E35"></stop>
            <stop offset="1" stop-color="#F50"></stop>
        </linearGradient>
        <linearGradient id="f_icon_1f2d0f1a_paint10_linear" x1="21.114" y1="9.221" x2="21.114" y2="15.54" gradientUnits="userSpaceOnUse">
            <stop stop-color="#fff"></stop>
            <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
        </linearGradient>
        <linearGradient id="f_icon_1f2d0f1a_paint11_linear" x1="14.778" y1="5.151" x2="20.733" y2="20.152" gradientUnits="userSpaceOnUse">
            <stop stop-color="red"></stop>
            <stop offset="1" stop-color="red" stop-opacity="0"></stop>
        </linearGradient>
        <linearGradient id="f_icon_1f2d0f1a_paint12_linear" x1="27.901" y1="10.859" x2="14.093" y2="30.751" gradientUnits="userSpaceOnUse">
            <stop stop-color="#fff"></stop>
            <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
        </linearGradient>
    </defs>
</svg>

 

It looks pixelated

Image

But as you might notice the outline around the star is not affected by that, why is this happening and how can I fix this? This SVG is from a web that I can use and turn into something like a PNG.

After trying several things out, I noticed that the shadows or what that is, is causing that it becomes pixelated, but how can I prevent that in both Photoshop and Illustrator?

0

Apparently the filter that generates the shadow is rendering the pixels before opening the file. Comment the filters in the file and open it again in Photoshop. In Illustrator it opened without any pixelation. If it appears pixelated in AI, go to View > Pixel Preview and make sure is not selected.

This is what you need to comment or delete in your file:

<!--
     <filter id="f_icon_1f2d0f1a_filter0_i" x="4.452" y="4.392" width="33.074" height="34.478" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
            <feColorMatrix in=`enter code here`"SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
            <feOffset dy="1.404"></feOffset>
            <feGaussianBlur stdDeviation=".936"></feGaussianBlur>
            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"></feComposite>
            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0"></feColorMatrix>
            <feBlend in2="shape" result="effect1_innerShadow"></feBlend>
        </filter>
        <filter id="f_icon_1f2d0f1a_filter1_d" x="7.541" y="7.362" width="27.147" height="26.198" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
            <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix>
            <feOffset dy=".468"></feOffset>
            <feGaussianBlur stdDeviation="1.17"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0"></feColorMatrix>
            <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend>
            <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"></feBlend>
        </filter> 
-->
  • Is there a way to keep the gradient and stuff in Photoshop though or not? – karl-police Sep 25 at 9:08
  • Also, is the order in Adobe Illustrator correct for you and does it show the shadow? – karl-police Sep 25 at 9:15
  • I don't know exactly what you want to do, but I will recommend you to open the SVG graphic in Illustrator, change it as you need it and then copy and paste it in Photoshop. Almost everything will be preserved inside. You don't need to use the SVG at all. If you need the SVG for other purposes export it from Illustrator when you finish your editing. – jlgarcia Sep 26 at 2:14
  • 1
    The problem here is that Illustrator does not support those SVG filters and SVG gradients. It's not a problem with your code. Try some other software instead. Your SVG code works perfectly in Inkscape for example, and also renders properly in Firefox and Chrome. There is a request for Adobe to support recent SVG standards and a promise that Adobe will do so, but it's dated more than a year ago - and hasn't happened yet. – Billy Kerr Sep 26 at 17:31
0

Another possibility I found is that I can use the SVG and put it inside a Base64 converter such as this one.

https://base64.guru/converter/encode/image/svg

It then generates a Base64 that I can use to turn it back into a SVG but this page has some special tool, that allows me to turn it into an image

https://base64.guru/converter/decode/image/svg

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.