Embedding images in .svg

Discuss SVG code, accessible via the XML Editor.
zeezm

Embedding images in .svg

Postby zeezm » Fri Sep 10, 2010 5:23 am

Hi,
I have been searching for a way to embed any image format it may (.gif, .png, .jpeg) into an .svg file. My work requires that I take an object, and warped instances of that object and store them in an svg with the ability to read then back as being label the same as the original object object and either a transformation tagged to it or an imbedded image saved in the .svg (A higher level link per say).

Has anyone got any ideas that my guide me.
Thank you.

Z

User avatar
tomh
Posts: 218
Joined: Sat Feb 14, 2009 10:14 pm

Re: Embedding images in .svg

Postby tomh » Fri Sep 10, 2010 6:13 am

Inkscape can embed images into the .svg, see (Extensions -> Images -> Embed Images ) This should work with .png, .jpg and .gif at least.

zeezm wrote:Hi,
My work requires that I take an object, and warped instances of that object and store them in an svg with the ability to read then back as being label the same as the original object object and either a transformation tagged to it or an imbedded image saved in the .svg (A higher level link per say).


Not sure what you are trying to do here. You can have copies of images (clones), and then clip and mask them to produce copies with different id's.

zeezm

Re: Embedding images in .svg

Postby zeezm » Fri Sep 10, 2010 1:32 pm

Thanks for the inkscape thought.

What I want to do might not be possible just off hand. Let me try to explain again. Please bare with me.

I want to take an object (for example a circle) This circle may have an id "circle" in svg.
I want to take a copy of circle and apply a warp, free form deformation, on it (for example, get a bent ellipse).
When I save the complete image as .svg, I want the bent ellipse to have an id off "circle" and added specs of the transformation applied to the original circle or vector data.
I hope this is clearer, would this be possible?
Would designing a plugin to store the circle copy and maintain a reference of what happens to the copy and then storing (caching, embed) the bent ellipse in the svg be a better approach?

Thanks.

vwanweb
Posts: 169
Joined: Sun Jun 06, 2010 1:48 pm

Re: Embedding images in .svg

Postby vwanweb » Sat Sep 11, 2010 12:26 am

Svg is based on xml, so the transforms applied to the object (image) would be part of the xml tree. To view the xml tree simply open the XML Editor >Edit >XML Editor..

If you right click the selected object you can open the Object Properties Dialog (Shift+Ctrl+O) and annotate any ID string you wish (do not know the character count limit). The issue here is that you may not be able to have a Before and After ID. But there is a description field that allows one to input a narrative for the object.
Example below

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="744.09448"
height="1052.3622"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1">
<path
d="m 297.14285,632.36218 a 148.57143,128.57143 0 1 1 -297.14285,0 148.57143,128.57143 0 1 1 297.14285,0 z"
id="testMaster"
style="color:#000000;fill:#003366;fill-opacity:1;fill-rule:nonzero;stroke:#888888;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate">
<desc
id="desc2987">test 1
test 2
test 3
</desc>

</path>
</g>
</svg>

notes:
id=testMaster - Is the object id applied when right clicking the object (Shift+Ctrl+O)
<desc id="desc2987">test 1
test 2
test 3
- Is the Description narrative for the object.

Not sure if this helps you or not, but this is the closest thing I could think of for what you have described. Again to my knowledge there is no before and after record for a single object. This file was saved (>File >Save As...) as a plain.svg versus the default of inkscape.svg

-vw

zeezm

Re: Embedding images in .svg

Postby zeezm » Fri Sep 24, 2010 11:19 am

Thank you. I will look further at how to do what I seek. But desc does solve it for the mean time.

Zeezm


Return to “SVG / XML Code”