2

I am a web developer.. I am not versed in the expertise of graphic design or managing SVG's excluding what you can do with them with web development.

I am working on a clients site and the SVG logo they provided has an <image> tag when I pull it into VS Code. I opened the file in illustrator and upon saving, it asks me if I want to embed the image in the SVG. I've found out that it is the radial gradient that is the PNG inside the SVG.

Is there a way to convert/remove this <image> into vector. It impacts load times and I need the logo to be fully vectorized.

Would appreciate any help on this,

Cheers.

1 Answer 1

0

You could recreate it using by defining an SVG gradient, like this for example:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="110mm" height="143mm" version="1.1" viewBox="0 0 110 143" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <linearGradient id="linearGradient1340" x1="26.5" x2="136" y1="182" y2="49" gradientTransform="translate(-26.5 -44.6)" gradientUnits="userSpaceOnUse">
   <stop offset="0"/>
   <stop stop-color="#d35f5f" offset=".546"/>
   <stop stop-color="#008000" offset="1"/>
  </linearGradient>
 </defs>
 <path d="m109 4.25s-47.1-13.9-50.3 8.57c-3.21 22.5 33.2 35 17.5 54.3s-58.9-11.8-58.9-11.8l-17.8 82.5s77.3 24.7 104-38.6c18.8-44.7-32.5-64.3-32.1-81.7 0.357-17.5 37.8-13.2 37.8-13.2z" fill="url(#linearGradient1340)"/>
</svg>

If want to do this in software such as Illustrator or Inkscape, you could do this using the Gradient Tool to recreate the required gradient.

1
  • Thanks man for your help. I will have a go at that for sure.
    – kuwifk
    Aug 10, 2021 at 16:07

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.