Geek Answers Handbook

Batik - put SVG on top of the image

I have an image file (jpg, etc.) and some svg images (the svg tag is copied from the site, like a Java String). An svg image has the same resolution as an image file. I want to put svg pictures on top of the image and save it as a single file. My approach, which I am not proud of, but works, is as follows:

  • use Batik JPEGTranscoder to transcode svg to image using these svg pictures and white background, save this image.
  • put the svg image on top of my image file by performing low-level operations on each pixel.

I want you to be able to draw SVG drawings on top of my image in one step.

+1
java image-processing svg batik
source share
1 answer

Using the SVG pattern will solve your problem.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> <defs> <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="200" width="200"> <image x="0" y="0" width="200" height="200" xlink:href="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"/> </pattern> </defs> <rect width="200" height="200" fill="url(#image)"/> <circle cx="100" cy="100" r="50"/> </svg>

The script is available here .

I pulled the SVG higher through the batik's ratifier, and it was correctly rasterized.

Update
As noted in the comments, you can simply include the image directly in your SVG without using a template.

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> <image x="0" y="0" width="200" height="200" xlink:href="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"/> <circle cx="100" cy="100" r="50"/> </svg>

The script is available here .

+4
source share

More articles:


All Articles