蜡染-将SVG放在图像顶部

Question

I have an image file (jpg, etc.) and some svg drawings (svg tag copied from the site, as Java String). The svg drawing is of the same resolution as the image file. I want to put svg drawings on top of the image and save it as one file. My approach, of which I'm not proud of, but works, is to:

• use Batik's JPEGTranscoder to transcode svg into image with this svg drawings and white background, save this image
• put the image with svg drawings on top of my image file by perfoming low level operations on each pixel

I would like to be able to put the svg drawings on top of my image in one step.

Answer 1

Using an SVG pattern would 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>

Fiddle available here .

I pulled the SVG above through the batik rasterizer, and it was correctly rasterized.

Update
As noted in the comments, you could just as well include the image directly in your SVG, without the use of a pattern.

<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>

Fiddle available here .