Re: Can I embed an image once and use it multiple times in an SVG?

[Archie Cobbs]

The <use> tag is for just this purpose.

You define your image like <image id="foo" ...> somewhere, then elsewhere
say <use xlink:href="#foo" ...> to reuse the image. You can make it smaller,
etc. using the transform attribute, etc. If you don't want the original
image to appear, put it inside a <defs> tag.

On Dec 31, 2007 7:20 AM, Tzvika Barenholz <[EMAIL PROTECTED]>
wrote:

> Hi all
>
> I am new to Batik, so please excuse me if I make oopsies.
>
> After creating code that used the svg dom implementation to create the
> following svg:
>
> <?xml version="1.0" encoding="UTF-8"?>
> <svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="
> http://www.w3.org/1999/xlink"; contentScriptType="text/ecmascript"
> width="400" zoomAndPan="magnify" contentStyleType="text/css" height="450"
> preserveAspectRatio="xMidYMid meet" version=" 1.0">
>   <image x="200" y="300" width="100"
> xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEt0lEQVR42u1WD0yU&#xD;&#xA;ZRj/fXffcVz8CQ9BEiKkRIHkCERzY0qAWKy5xA2WOCrZ0Cv6Y6sZUxiDtMbmH5rU&#xD;&#xA;TMyVslpbSQwlycAYgsCFooIIQUJ3GCCnXCoccPf1vN/3XdLWGhrq2njufnvvffe+&#xD;&#xA;7/M8v+f3vvdygiDgQZoCD9hmApgJgL+LNdGEJEIsIZhwkVBF+JZQe68DeAPG2kJ0&#xD;&#xA;HgGMNcDVC4B2gQ7+sTrMT9oMv+g3ac5Hd7KhMjc3d6pz30bb4d2ofx/obwYEG6B6&#xD;&#xA;CLjZD/RWA331gLPHc/AKu0ZzG6abgWjKfCcMe0THgmcIOJULMH4Twg0jODbD3A7U&#xD;&#xA;bwfcAwqJieaplmOqIkwSaR+l5Fz9GO0QvBdBoJZz84PgPAvgFFIQnUwKSJ5uBlJg&#xD;&#xA;/IlmqyE4UebModtjxAZ9iQlOoaYAlNSxUzmqQNf76xzH3aB1nxB++y8MpBMMdkGY&#xD;&#xA;i6ttgM0KjmiHlZiw9IAjRsQ+jYvOmQ1dxIRNwAdfGrIGr4/00sg+QvidMvACQV99&#xD;&#xA;pidhR0kD9mTGIVQbBAzTfn8Yxczh5AqMUZKkAbE0TJTMPIPRabqOwiMtKCo9g5SY&#xD;&#xA;JzIyng/LWPCoZ6XMSOm/BRDHHBva+9Z+WFKHk2eNUCh51J43IdSfjr1hN2VOM6wW&#xD;&#xA;YlwtZc7YYHAYzatt/R1MmeM2Gw4db8XnFS2I0fkmvLZmccIzEfN+lgP5gjDuCCCK&#xD;&#xA;Oe4ymV/J+6wKZac6yYFKdC7QRkcburFxE9093RWi0DjrMBWPltpttzNnpl0Iug9w&#xD;&#xA;9ECP1KfFbD2JAtXNl1HV9At0j3tHblwTVbw2JrRYxSvV7B7I7xu0HHrv44qnMneW&#xD;&#xA;oaPXLApKoeBIXAoo6Ldp6BaG+bmIffpJscYYGZQdC393vmwrcup8UF7fQz5JE3YJ&#xD;&#xA;7LcEAVeGLDjR2AF3FzWigv2G+KY247bkrSUwW26BY0oWZSnQhwKQM2BJFH/fSgGF&#xD;&#xA;IX/VfumokdrFYKjmjHaWec5JFxw43iYFJjj2kYztwfMKvPTsYmSlrYDWXbOLlUL5&#xD;&#xA;adEuPi0xYrnaiUf75QGMjtnEzDlOAmNA6itxttuMUyZnWObEQ7M0Ex7xeejwSsV3&#xD;&#xA;/SHYXjGM8sZekW4GASx7QWKCeuviQ1G8ZTVS4hcVadSqDTR4mGDj5CfZI4RXR60T&#xD;&#xA;27768Rz2lTajw3SNNKAi57yoB47nqSz8X9pgZeKUSjFIiW66IUl0dvs4tRPUTlA7&#xD;&#xA;jthwX2SvX4aQgNkHZfE1/dMpuELIdlbzO15OjEgn6H9o6g4p/MaAxksD5EyQrlvZ&#xD;&#xA;WMicXBrHgODgWR6NnO+NvLQliAyac0x2XD6Ve2CEsJdhZVTgOoK+pWsgev+xCyir&#xD;&#xA;68HE5Agcgcg+ObtU8WB/D2QlhyEu3O/0pON2V/+G5wkHfbQulYlL5zmtX7lQR7LE&#xD;&#xA;JZMFY3TT3daJeM7gO1uDnBd1KNiw5FygjzvbVE9omY7/gnoGr4c1udmpkfq3ksLe&#xD;&#xA;+brmVxSf6ILJbMUsVydsXh2E1BUB4JWKLTS34F49SLoJ77ppVPnpq4I2EfQ1rQMB&#xD;&#xA;EYFauGp4eiQgj91s9+NJZpGzLFge6p1A7Wl57L69CSdb5cyzfCaA/30AfwLVs9IJ&#xD;&#xA;SOkutwAAAABJRU5ErkJggg=="
> xlink:type="simple" xlink:actuate="onLoad" height="100"
> preserveAspectRatio="xMidYMid meet" xlink:show="embed" />
>   <image x="30" y="30" width="100"
> xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEt0lEQVR42u1WD0yU&#xD;&#xA;ZRj/fXffcVz8CQ9BEiKkRIHkCERzY0qAWKy5xA2WOCrZ0Cv6Y6sZUxiDtMbmH5rU&#xD;&#xA;TMyVslpbSQwlycAYgsCFooIIQUJ3GCCnXCoccPf1vN/3XdLWGhrq2njufnvvffe+&#xD;&#xA;7/M8v+f3vvdygiDgQZoCD9hmApgJgL+LNdGEJEIsIZhwkVBF+JZQe68DeAPG2kJ0&#xD;&#xA;HgGMNcDVC4B2gQ7+sTrMT9oMv+g3ac5Hd7KhMjc3d6pz30bb4d2ofx/obwYEG6B6&#xD;&#xA;CLjZD/RWA331gLPHc/AKu0ZzG6abgWjKfCcMe0THgmcIOJULMH4Twg0jODbD3A7U&#xD;&#xA;bwfcAwqJieaplmOqIkwSaR+l5Fz9GO0QvBdBoJZz84PgPAvgFFIQnUwKSJ5uBlJg&#xD;&#xA;/IlmqyE4UebModtjxAZ9iQlOoaYAlNSxUzmqQNf76xzH3aB1nxB++y8MpBMMdkGY&#xD;&#xA;i6ttgM0KjmiHlZiw9IAjRsQ+jYvOmQ1dxIRNwAdfGrIGr4/00sg+QvidMvACQV99&#xD;&#xA;pidhR0kD9mTGIVQbBAzTfn8Yxczh5AqMUZKkAbE0TJTMPIPRabqOwiMtKCo9g5SY&#xD;&#xA;JzIyng/LWPCoZ6XMSOm/BRDHHBva+9Z+WFKHk2eNUCh51J43IdSfjr1hN2VOM6wW&#xD;&#xA;YlwtZc7YYHAYzatt/R1MmeM2Gw4db8XnFS2I0fkmvLZmccIzEfN+lgP5gjDuCCCK&#xD;&#xA;Oe4ymV/J+6wKZac6yYFKdC7QRkcburFxE9093RWi0DjrMBWPltpttzNnpl0Iug9w&#xD;&#xA;9ECP1KfFbD2JAtXNl1HV9At0j3tHblwTVbw2JrRYxSvV7B7I7xu0HHrv44qnMneW&#xD;&#xA;oaPXLApKoeBIXAoo6Ldp6BaG+bmIffpJscYYGZQdC393vmwrcup8UF7fQz5JE3YJ&#xD;&#xA;7LcEAVeGLDjR2AF3FzWigv2G+KY247bkrSUwW26BY0oWZSnQhwKQM2BJFH/fSgGF&#xD;&#xA;IX/VfumokdrFYKjmjHaWec5JFxw43iYFJjj2kYztwfMKvPTsYmSlrYDWXbOLlUL5&#xD;&#xA;adEuPi0xYrnaiUf75QGMjtnEzDlOAmNA6itxttuMUyZnWObEQ7M0Ex7xeejwSsV3&#xD;&#xA;/SHYXjGM8sZekW4GASx7QWKCeuviQ1G8ZTVS4hcVadSqDTR4mGDj5CfZI4RXR60T&#xD;&#xA;27768Rz2lTajw3SNNKAi57yoB47nqSz8X9pgZeKUSjFIiW66IUl0dvs4tRPUTlA7&#xD;&#xA;jthwX2SvX4aQgNkHZfE1/dMpuELIdlbzO15OjEgn6H9o6g4p/MaAxksD5EyQrlvZ&#xD;&#xA;WMicXBrHgODgWR6NnO+NvLQliAyac0x2XD6Ve2CEsJdhZVTgOoK+pWsgev+xCyir&#xD;&#xA;68HE5Agcgcg+ObtU8WB/D2QlhyEu3O/0pON2V/+G5wkHfbQulYlL5zmtX7lQR7LE&#xD;&#xA;JZMFY3TT3daJeM7gO1uDnBd1KNiw5FygjzvbVE9omY7/gnoGr4c1udmpkfq3ksLe&#xD;&#xA;+brmVxSf6ILJbMUsVydsXh2E1BUB4JWKLTS34F49SLoJ77ppVPnpq4I2EfQ1rQMB&#xD;&#xA;EYFauGp4eiQgj91s9+NJZpGzLFge6p1A7Wl57L69CSdb5cyzfCaA/30AfwLVs9IJ&#xD;&#xA;SOkutwAAAABJRU5ErkJggg=="
> xlink:type="simple" xlink:actuate="onLoad" height="100"
> preserveAspectRatio="xMidYMid meet" xlink:show="embed" />
>   <rect x="10" y="20" fill-opacity="0.1" fill="red" width="100"
> height="50" />
> </svg>
>
> I now encounter the problem of reducing the size of the svg. My situation
> calls for reusing the same png image in multiple locations in the svg dom.
> it also calls for the image to be embedded. my question is: is there a way
> to embed the base64 data just once, and reference from multiple svn:image
> tags?
>
> thanks in advance
> Tzvika
>



-- 
Archie L. Cobbs
CTO, Awarix, Inc.
http://www.awarix.com