Remove raster image(s) from SVG

Question

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.

Answer 1

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.