You are viewing a plain text version of this content. The canonical link for it is here.
Posted to batik-users@xmlgraphics.apache.org by olivierk <ok...@gmail.com> on 2010/06/14 16:18:02 UTC
How do I superimpose one SVG image onto another?
I have 2 SVG files I need to overlay. One file serve as the background image
and is 308px by 308px while the second file (260px by 260px) is the
foreground image that must be centered (that is at the center of the
background image). I'd like the result of the operation to be saved in a
third SVG file. Any suggestions?
Thanks,
Olivier.
--
View this message in context: http://old.nabble.com/How-do-I-superimpose-one-SVG-image-onto-another--tp28880111p28880111.html
Sent from the Batik - Users mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
Re: How do I superimpose one SVG image onto another?
Posted by th...@kodak.com.
Hi Olivierk,
olivierk <ok...@gmail.com> wrote on 06/14/2010 10:18:02 AM:
> I have 2 SVG files I need to overlay. One file serve as the background
image
> and is 308px by 308px while the second file (260px by 260px) is the
> foreground image that must be centered (that is at the center of the
> background image). I'd like the result of the operation to be saved in a
> third SVG file. Any suggestions?
The SVG 'image' element.
Re: How do I superimpose one SVG image onto another?
Posted by jonathan wood <jo...@gmail.com>.
my input svg dimensions are identical, unlike your inputs...you'll need to
adjust accordingly
On Tue, Jun 15, 2010 at 5:47 PM, jonathan wood
<jo...@gmail.com>wrote:
>
> This should be pretty straightforward...
>
> given background.svg)
>
> <svg viewBox="0 0 308 308" xmlns:svg="http://www.w3.org/2000/svg" xmlns="
> http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
> <rect width="308" height="308" fill="#112277"/>
> </svg>
>
>
> and foreground.svg
>
> <svg viewBox="-24 -24 356 356" xmlns:svg="http://www.w3.org/2000/svg"
> xmlns="http://www.w3.org/2000/svg" xmlns:xlink="
> http://www.w3.org/1999/xlink">
> <rect width="308" height="308" fill="#772211"/>
> </svg>
>
>
> transcoding the following will produce the overlay
>
> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="
> http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
> <image x="0" y="0" width="308" height="308"
> xlink:href="background.svg"/>
> <image x="0" y="0" width="308" height="308"
> xlink:href="foreground.svg"/>
> </svg>
>
>
>
>
>
> On Tue, Jun 15, 2010 at 9:35 AM, olivierk <ok...@gmail.com> wrote:
>
>>
>> batik dom manipulation code :)
>> Our application generate various types of 2D barcodes in different formats
>> (BMP, JPG and PNG) and our clients have requested that we add support for
>> SVG.
>> I have looked at the "using Batik" section on Batik website but did not
>> find
>> any example of overlaying 2 images.
>>
>>
>> jonathan wood-3 wrote:
>> >
>> > do you need an xml representation or batik dom manipulation code?
>> >
>> >
>> > On Mon, Jun 14, 2010 at 10:18 AM, olivierk <ok...@gmail.com> wrote:
>> >
>> >>
>> >> I have 2 SVG files I need to overlay. One file serve as the background
>> >> image
>> >> and is 308px by 308px while the second file (260px by 260px) is the
>> >> foreground image that must be centered (that is at the center of the
>> >> background image). I'd like the result of the operation to be saved in
>> a
>> >> third SVG file. Any suggestions?
>> >> Thanks,
>> >>
>> >> Olivier.
>> >>
>> >> --
>> >> View this message in context:
>> >>
>> http://old.nabble.com/How-do-I-superimpose-one-SVG-image-onto-another--tp28880111p28880111.html
>> >> Sent from the Batik - Users mailing list archive at Nabble.com.
>> >>
>> >>
>> >> ---------------------------------------------------------------------
>> >> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
>> >> For additional commands, e-mail:
>> batik-users-help@xmlgraphics.apache.org
>> >>
>> >>
>> >
>> >
>>
>> --
>> View this message in context:
>> http://old.nabble.com/How-do-I-superimpose-one-SVG-image-onto-another--tp28880111p28891380.html
>> Sent from the Batik - Users mailing list archive at Nabble.com.
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
>> For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
>>
>>
>
Re: How do I superimpose one SVG image onto another?
Posted by jonathan wood <jo...@gmail.com>.
This should be pretty straightforward...
given background.svg)
<svg viewBox="0 0 308 308" xmlns:svg="http://www.w3.org/2000/svg" xmlns="
http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="308" height="308" fill="#112277"/>
</svg>
and foreground.svg
<svg viewBox="-24 -24 356 356" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink
">
<rect width="308" height="308" fill="#772211"/>
</svg>
transcoding the following will produce the overlay
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="
http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="308" height="308"
xlink:href="background.svg"/>
<image x="0" y="0" width="308" height="308"
xlink:href="foreground.svg"/>
</svg>
On Tue, Jun 15, 2010 at 9:35 AM, olivierk <ok...@gmail.com> wrote:
>
> batik dom manipulation code :)
> Our application generate various types of 2D barcodes in different formats
> (BMP, JPG and PNG) and our clients have requested that we add support for
> SVG.
> I have looked at the "using Batik" section on Batik website but did not
> find
> any example of overlaying 2 images.
>
>
> jonathan wood-3 wrote:
> >
> > do you need an xml representation or batik dom manipulation code?
> >
> >
> > On Mon, Jun 14, 2010 at 10:18 AM, olivierk <ok...@gmail.com> wrote:
> >
> >>
> >> I have 2 SVG files I need to overlay. One file serve as the background
> >> image
> >> and is 308px by 308px while the second file (260px by 260px) is the
> >> foreground image that must be centered (that is at the center of the
> >> background image). I'd like the result of the operation to be saved in a
> >> third SVG file. Any suggestions?
> >> Thanks,
> >>
> >> Olivier.
> >>
> >> --
> >> View this message in context:
> >>
> http://old.nabble.com/How-do-I-superimpose-one-SVG-image-onto-another--tp28880111p28880111.html
> >> Sent from the Batik - Users mailing list archive at Nabble.com.
> >>
> >>
> >> ---------------------------------------------------------------------
> >> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
> >> For additional commands, e-mail:
> batik-users-help@xmlgraphics.apache.org
> >>
> >>
> >
> >
>
> --
> View this message in context:
> http://old.nabble.com/How-do-I-superimpose-one-SVG-image-onto-another--tp28880111p28891380.html
> Sent from the Batik - Users mailing list archive at Nabble.com.
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
> For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
>
>
Re: How do I superimpose one SVG image onto another?
Posted by olivierk <ok...@gmail.com>.
batik dom manipulation code :)
Our application generate various types of 2D barcodes in different formats
(BMP, JPG and PNG) and our clients have requested that we add support for
SVG.
I have looked at the "using Batik" section on Batik website but did not find
any example of overlaying 2 images.
jonathan wood-3 wrote:
>
> do you need an xml representation or batik dom manipulation code?
>
>
> On Mon, Jun 14, 2010 at 10:18 AM, olivierk <ok...@gmail.com> wrote:
>
>>
>> I have 2 SVG files I need to overlay. One file serve as the background
>> image
>> and is 308px by 308px while the second file (260px by 260px) is the
>> foreground image that must be centered (that is at the center of the
>> background image). I'd like the result of the operation to be saved in a
>> third SVG file. Any suggestions?
>> Thanks,
>>
>> Olivier.
>>
>> --
>> View this message in context:
>> http://old.nabble.com/How-do-I-superimpose-one-SVG-image-onto-another--tp28880111p28880111.html
>> Sent from the Batik - Users mailing list archive at Nabble.com.
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
>> For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
>>
>>
>
>
--
View this message in context: http://old.nabble.com/How-do-I-superimpose-one-SVG-image-onto-another--tp28880111p28891380.html
Sent from the Batik - Users mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
Re: How do I superimpose one SVG image onto another?
Posted by jonathan wood <jo...@gmail.com>.
do you need an xml representation or batik dom manipulation code?
On Mon, Jun 14, 2010 at 10:18 AM, olivierk <ok...@gmail.com> wrote:
>
> I have 2 SVG files I need to overlay. One file serve as the background
> image
> and is 308px by 308px while the second file (260px by 260px) is the
> foreground image that must be centered (that is at the center of the
> background image). I'd like the result of the operation to be saved in a
> third SVG file. Any suggestions?
> Thanks,
>
> Olivier.
>
> --
> View this message in context:
> http://old.nabble.com/How-do-I-superimpose-one-SVG-image-onto-another--tp28880111p28880111.html
> Sent from the Batik - Users mailing list archive at Nabble.com.
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
> For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
>
>