Exporting vectors containing raster images in SVG format

[eadig]

Hello everyone

This is my first post and I would like to ask a pressing question. My objective is to export vector graphics I created using Vectornator in the SVG format that contain compressed raster images imported from raster graphics apps (such as Procreate) as the textures of the vector shapes.

Once I exported the file in the SVG format, I ended up with XML code that can display the following texture raster correctly with the following mark-up:

<g xmlns="http://www.w3.org/2000/svg" clip-path="url(#ClipPath)">
<use opacity="1" transform="matrix(0.232727 0 0 0.232727 23.2727 -2.5928e-06)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Image"/>
</g>

The mark-up doesn’t describe much and the quesion is whether this texture is scalable just like any other SVG and how it is showing the texture.

It would be appreciated if anyone could provide me with some insight.

Thanks for reading.

[eadig]

I found the section in the file where the variables such as #ClipPath are defined. One line in it refers to the raster image using , which apparently contains the binary data of the png file, so evidently raster images cannot be convered into part of SVG.

[ButlerToCats]

Hi @eadig

Makes sense to me.

If you include a raster image, it will be included in the SVG as raster data.
The SVG format standard allows for raster image data to be included, so your raster image has been converted to part of the SVG output, as raster data, as you provided it.

Raster data, whether in a raster format or embedded in SVG, is still raster data.
You could change the image transformation matrix to scale the raster data, at the cost of loss of raster display quality.

If you want the image texture to be converted to vector shapes, Vectornator has an Auto Trace option to … convert raster images into vector shapes. You can use this before clipping to a shape and exporting to SVG, and your traced data will be exported as vector.

Of course, the quality of traced vector shapes never exactly matches the raster image, because the raster image is specified on a pixel-by-pixel basis, which is not feasible for a vector representation.

Even in SVG, there is no way to have magically scaling raster data, unlike the hilariously funny and completely unrealistic technical fiction in some CSI shows, which is the storytelling equivalent of getting a full closeup photograph of a person’s face from a partial footprint.

[eadig]

Thanks for illustraing the points. The Auto Trace feature is quite good indeed.

The only other way I found I could render textured SVG created with Vectornator using a web browser is to incorporate XML’s SVG filters into the SVG data exported from the app. Then again, the filters seem very technical to use and there’s no telling that detailed textures can ever be reproduced using the markup…

Cheers