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.)
Related
I have a number of different SVGs to include in my project (Angular 10).
Some of them are used multiple times with different sizes and fill colors etc.
I am trying to find a way to reference them in my html code and have access to via styling:
CSS:
.svg {
fill: red;
}
Referencing:
<svg>
<use></use>
</svg>
<object></object>
<img></img>
<embed></embed>
As yet, I have not been able to find a solution that allows me to reference them but also have the ability to access the fill property in the SVG itself as i can when adding inline.
Inline:
<svg>
<path>
</path>
</svg>
Adding them inline is going to be messy.
How is this usually handled?
Your help is appreciated!
You can't. CSS does not apply across document boundaries. If the CSS rules are in the HTML (or imported into the HTML via <link>) then it cannot affect the content of external files.
One solution people have used in the past is to use a bit of Javascript to inline SVG files at runtime.
Otherwise, you will need to put the CSS in the external SVG itself.
I'm having a hard time finding some precise information on the browser support for the <use> element to include inline SVGs. There is a Can I Use page on SVG fragment identifiers, but as I understand this is only for the <view> element. Any idea?
In HTML5, elements can have arbitrary metadata stored in XML attributes whose names start with data- such as <p data-myid="123456">. Is this part of the SVG spec too?
In practice this technique works fine for SVG docs in many places. But I'd like to know if it's part of the official SVG spec or not, because the format is young enough that there's still a lot of incompatibility between browsers, especially in mobile. So before committing to code I'd like know if I can expect future browsers to converge on supporting this.
I found this message from the working group mailing list saying they "expect [they] will" support it. Did this become official?
While other answers are technically correct, they omit the fact that SVG provides an alternative mechanism for data-*. SVG allows any attribute and tag to be included, as long as it doesn't conflict with existing ones (in other words: you should use namespaces).
To use this (equivalent) mechanism:
use mydata:id instead of data-myid, like this: <p mydata:id="123456">
make sure you define the namespace in SVG opening tag, like this: <svg xmlns:mydata="http://www.myexample.com/whatever">
EDIT: SVG2, currently W3C Candidate Recommendation (04 October 2018), will support data- directly (without namespaces, the same as HTML). It will take some time before the support is widespread though. Thanks #cvrebert for pointing this out.
The data-* attribute is part of HTML5. It’s not a generic XML attribute.
The current SVG W3C Recommendation is SVG 1.1 (from 2011-08). It doesn’t allow this attribute, as you can check in the attributes list.
The same is the case for the SVG 2 Working Draft (from 2012-08). Update (2015): It seems that it’s intended to support data-* attributes in SVG 2 (currently still a Working Draft).
data-* attributes on SVG elements are officially supported in the current draft of SVG2. See:
w3c/svgwg commit 1cb4ee9: Added SVGElement.dataset and allowed data-* attributes on all SVG elements.
ACTION-3694: Add "data-*" attributes notes to spec. (Created on: January 15, 2015)
RESOLUTION: We will reserve "data-*" attributes to be used in SVG content. The API for handling them is on Element. (from SVG WG Telecon on 15-Jan-2015)
https://lists.w3.org/Archives/Public/www-svg/2014Dec/0022.html
there is a more general mechanism.
svg supports desc elements which may contain arbitrary xml from other namespaces. link instances of this elements or child nodes from you own namespace by dependent ids or refid attributes.
this is the relevant part of the spec (5.4).
Hope somebody can help me, I'm stuck.
I am creating a set of SVG's and HTML files from an XML doc (via XSLT2), and I have hyperlinks in my SVG graphics (with xlink:href) to the HTML files. Basically, showing a database structure with rectangles for tables, and a click on a table goes to the explanation in HTML. So far so good.
Now, my customer tells me "I need all that in a single interactive PDF doc". So using another XSLT I produce a single XSL-FO doc with fo:block's for each table details and instream SVG's for the diagrams. The FO doc will be further processed through FOP to produce the PDF.
But now, I can't find a way to refer to a fo:block in the same doc from the rectangle in the embedded SVG? xlink:href expects a reference to an <a name="">, so how to indicate that I want to point to a fo:block id? Or is there an equivalent to the <a name=""> construct in FO?
Any help/hint greatly appreciated! Thanks to the community.
Add an id attribute to the fo:block and it should work:
<fo:block id="foo"></fo:block>
<image xlink:href="#foo" />
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.