CODEWITHSUNDEEP
javaimage-processingsvgbatik
qba
qba

Reputation: 201

Batik - put SVG on top of image

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:

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

Upvotes: 1

Views: 2428

Answers (1)

Robby Cornelissen
Robby Cornelissen

Reputation: 97162

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.

Upvotes: 4

Related Questions