Is there a way to attach metadata directly to a grouping element () in an svg file? I couldn't find anything about that in the specification or elsewhere on the web, so I assume it's not possible. Perhaps there are other ways to attach element specific metadata within the svg file...
What I try to do is to create a map and attach information about adjacent countries.
Cheers.
As XML is extensible you can add attributes and element children as you wish. Here's a possible example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:sol="http://www.sol.org">
<circle cx="10" cy="20" sol:country="ruritania" r="5"/>
</svg>
Here the svg and circle elements are in SVG namespace and sol:country is in your namespace. I believe that SVG user agents will ignore foreign namespaces. You could also use a metadata schem such as Dublin Core.
Alternatively you could use a desc element (http://www.w3.org/TR/SVG/struct.html#DescElement)
5.4 The 'desc' and 'title' elements
Each container element or graphics element in an SVG drawing can supply a 'desc' and/or a 'title' description string where the description is text-only. When the current SVG document fragment is rendered as SVG on visual media, 'desc' and 'title' elements are not rendered as part of the graphics. User agents may, however, for example, display the 'title' element as a tooltip, as the pointing device moves over particular elements. Alternate presentations are possible, both visual and aural, which display the 'desc' and 'title' elements but do not display 'path' elements or other graphics elements. This is readily achieved by using a different (perhaps user) style sheet. For deep hierarchies, and for following 'use' element references, it is sometimes desirable to allow the user to control how deep they drill down into descriptive text.
Related
I am looking for a way to determine the actual value of attributes such as fill or stroke of elements contained in an SVG (path, circle, ...). I know of several ways to parse an SVG and access direct element attributes, but I can't find an easy way to determine the value of an attribute as it will be displayed taking into account cascading styles and xlink:href references.
The method window.getComputedStyle applied to the element does exactly that!
I made a vector graphic in Inkscape, including layers and sub-layers for further use in Processing. I named all the layers in the UI, and realized that the final SVG only creates an inkscape:label attribute with that name, but id remains generic:
<svg:g id="layer1" inkscape:label="My custom label">
I know I can manually edit the labels in the XML editor, but is there a setting somewhere to automatically use the layer name as id?
I recently came across this question, as I was looking for the same topic. As it turned out, Inkscape (v0.92) has functions for that purpose now.
You can set IDs, and Labels in the Inkscape GUI in Object Properties menu, and they will be applied to the XML code then.
Example
Inkscape GUI
Draw a yellow rectangle and select it
Click on Object -> Object Properties...
In the menu set ID to yellow_rect and Label to #yellow_rect
Apply changes by a click on Set
To complete this example, repeat the steps above to create red_rect, set Label and ID
Eventually, group both rectanbles and set identifiers for the group as well.
XML Code
When I open the SVG file, Inkscape put my identifiers to the appropriate XML tags.
<g
id="rect_group">
<rect
rx="0.11797347"
y="250.69791"
x="5.0270834"
height="18.785416"
width="30.427082"
id="yellow_rect1"
style="fill:#f4ff00;fill-opacity:1;stroke:#000000;stroke-width:0.52916667;stroke-linejoin:round;stroke-miterlimit:3.79999995;stroke-dasharray:none;stroke-opacity:1" />
<rect
rx="0.11797347"
y="258.89999"
x="24.606249"
height="16.933332"
width="33.602081"
id="red_rect1"
style="fill:#f40000;fill-opacity:1;stroke:#000000;stroke-width:0.52916664;stroke-linejoin:round;stroke-miterlimit:3.79999995;stroke-dasharray:none;stroke-opacity:1" />
</g>
I have the same requirement when I am creating a svg for Fritzing, because fritzing doesn't refer to the inkscape:label. In such circumstance, I can make sure that label holds the legit value for id. So I make a script to do saving myself out of the dirty and heavy job.
Please note that the script ONLY READ 'Plain SVG' format.
https://gist.github.com/TerrenceSun/972ef4eea97f331af1e6abfcafb7c6e5
I don't know about a setting to automatically use the layer name as id. But why not do it the other way round: if you remove the inkscape:label attribute, then the layer name automatically becomes the id of the svg:g in the inkscape UI.
The attribute inkscape:groupmode=layer is enough to make the svg:g a layer element.
I am new to svg, as far as I saw everywhere they using svg elements within g tag, is there any particular reason for using svg elements within g tag other than applying transformation for whole set of elements?
That's a pretty important and useful reason. But other reasons you might do it are so you can:
apply the same styling (eg. fill="blue") to a set of elements,
reference to the group of objects from a use.
Not to mention the simple organisational reasons.
http://tutorials.jenkov.com/svg/g-element.html says:
The <g> element is used to group SVG shapes together. Once grouped you can transform the whole group of shapes as if it was a single shape. This is an advantage compared to a nested <svg> element which cannot be the target of transformation by itself.
I wish to add semantics to SVG files and would like to use schema.org terms. Does SVG have a syntax for doing this? My first attempt would be:
<svg:text xmlns:svg="xmlns="http://www.w3.org/2000/svg" x="100" y="200"
html:itemtype="http://schema.org/Person" xmlns:html="http://www.w3.org/1999/xhtml"
>Joe Soap</svg:text>
Will this be valid SVG and display in conformant tools? and will the schema.org markup be recognized by search engines?
I never tried it, but I guess it should be possible to use RDFa, as SVG Tiny 1.2 allows the attributes
about
content
datatype
property
rel
resource
rev
typeof
(You could use the metadata element with RDF/XML.)
I am using RaphaelJS for a project that requires vector drawing for visualization of some data.
I am not able to figure out how to push and pop transformation states.
(equivalent of context.save() and context.restore() in html5 canvas)
Can someone point me in the right direction?
thanks.
Could you explain why you need to push and pop transformation state?
In svg you don't really need to do that, the browsers do it for you. If you want a particular transform to apply to an element then just add a transform attribute to it. You can make a transform apply to many elements by using <g> elements (in Raphaël there's Paper.set, which can be used like a <g> element, and you have the Element.transform method to set the transforms).
Update:
context.save() - in svg terms this would be to take the current transformation matrix (CTM) of the element at a given time and storing it somewhere, in Raphaël I guess this might be Element.transform() (I'm not 100% sure if it includes whole stack of transformations or not, anyway, in pure svg the CTM can be fetched via the getCTM() method which is available on all elements). One way of doing this would be to insert a <g> element with the transformation you want.
context.restore() - in svg this would be equivalent to removing a transformation from the list of transforms, but note that in svg siblings don't "inherit" the transformation (this is unlike html5 canvas or OpenGL where the currently set matrix is just applied to anything you draw after setting the transform). If you want a transform to apply to many elements then you create a <g> which has the transformation that should apply to all the children of that element, and to restore you just insert elements to the parent of the <g> instead. Raphaël doesn't have any built-in support for the <g> element (unless you count Element.set, which is a similar concept), a guess for why Raphaël does this is that it's to prevent people from trying to do things like this since it becomes very easy to bloat the DOM without realizing it (remember, SVG is a retained mode graphics format, unlike canvas and OpenGL).