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?

Improve this question
0

2 Answers 2

Reset to default
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> 
-->
Improve this answer
4
  • Is there a way to keep the gradient and stuff in Photoshop though or not?
    – karl-police
    Sep 25, 2019 at 9:08
  • Also, is the order in Adobe Illustrator correct for you and does it show the shadow?
    – karl-police
    Sep 25, 2019 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, 2019 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, 2019 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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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