I am trying to properly implement the switch tag for a foreignObject tag in SVG so that Internet Explorer can display something else (nothing new in IE, always leaving features out). The documentation is almost perfectly clear on how to do this:
<switch>
<!-- Process the embedded XHTML if the requiredExtensions attribute
evaluates to true (i.e., the user agent supports XHTML
embedded within SVG). -->
<foreignObject width="100" height="50"
requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML">
<!-- XHTML content goes here -->
<body xmlns="http://www.w3.org/1999/xhtml">
<p>Here is a paragraph that requires word wrap</p>
</body>
</foreignObject>
<!-- Else, process the following alternate SVG.
Note that there are no testing attributes on the 'text' element.
If no testing attributes are provided, it is as if there
were testing attributes and they evaluated to true.-->
<text font-size="10" font-family="Verdana">
<tspan x="10" y="10">Here is a paragraph that</tspan>
<tspan x="10" y="20">requires word wrap.</tspan>
</text>
The example is nice and clear and shows how to use the requiredExtensions attribute. However, the hyperlink "http://example.com/SVGExtensions/EmbeddedXHTML" is meaningless to me. What would I have to put in place of this in order to denote that XHTML is the requiredExtension for this foreignObject?
I have found the answer after much fiddling. The example should probably be added to the documentation... I have tested in IE, FF, and Chrome so far and all three have treated the switch properly:
Instead of using the "requiredExtensions" attribute, I used the "requiredFeatures" attribute and linked to "http://www.w3.org/TR/SVG11/feature#Extensibility"
So it would look like:
<switch>
<foreignObject width="100" height="50"
requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<!-- whatever external user-agent stuff -->
</foreignObject>
<!-- Alternate SVG content if foreignObject is not supported -->
</switch>
This works for testing if foreignObject is supported by the user-agent, but it isn't perfect as you still aren't denoting which external namespace you plan to use in the foreignObject which that user-agent may not support. It works better than nothing though.
Unfortunately, no standard says what to do but Firefox uses http://www.w3.org/1999/xhtml to indicate that it supports xhtml in foreignObject tags (and http://www.w3.org/1998/Math/MathML for mathml). I believe other UAs may have copied this but I haven't checked.
Related
I'm trying to wrap text automatically since I won't know what the text is ahead of time.
I tried using the accepted answer in this question, but nothing shows up. Here is my sample code so far:
<svg id="viz" style="margin:auto; position:fixed; height:100%; width:100%;" xmlns="http://www.w3.org/2000/svg">
<switch>
<g requiredFeatures="http://www.w3.org/Graphics/SVG/feature/1.2/#TextFlow">
<textArea width="200" height="300">whatever</textArea>
</g>
<foreignObject width="200" height="300">
<textArea xmlns="http://www.w3.org/1999/xhtml" style="width: 200px;height: 300px">otherwise</textArea>
</foreignObject>
</switch>
</svg>
I am rendering this SVG in FireFox (since its part of a web page).
Firefox implements some parts of SVG 2 and dropping support for requiredFeatures is one part of SVG 2 that it has implemented.
Previous versions of SVG included a third conditional processing attribute, requiredFeatures. This was intended to allow authors to provide fallback behavior for user agents that only implemented parts of the SVG specification. Unfortunately, poor specification and implementation of this attribute made it unreliable as a test of feature support.
That means that the first part of the switch now applies when at the time I wrote the answer to the other question, it didn't. The answer is to remove the switch and the first element as nobody implements SVG 1.2 textArea any more.
<svg id="viz" style="margin:auto; position:fixed; height:100%; width:100%;" xmlns="http://www.w3.org/2000/svg">
<foreignObject width="200" height="300">
<textArea xmlns="http://www.w3.org/1999/xhtml" style="width: 200px;height: 300px">otherwise</textArea>
</foreignObject>
</svg>
I am looking for clarification about combining <title> and <desc> with the element for Accessibility. Is the following a valid implemention?
<svg>
<title>This is an SVG</title>
<desc">Lorem ipsum descriptum...</desc>
<use xlink:href="#symbolID"></use>
</svg>
Or would you place it in the <symbol> element like this?
<symbol id="symbolID">
<title>This is an svg</title>
<desc>Lorem ipsum ...</desc>
<path d="......"/>
</symbol>
Would screen readers be able to pick these up?
Add a role="img" and a screen reader can pick it up. It may announce both the <title> and the <desc> depending on screen reader, browser, and versions of each.
For a little extra compatibility you can added aria-labelledby to tell the screen reader where to look for the explicit accessible name (which also means it may not announce the <desc>). Some combos may read the <title> twice as a result, too, so it behooves you to be brief.
<a href="#"> foo
<svg role="img" aria-labelledby="twitterTitle">
<title id="twitterTitle">Twitter Account</title>
<desc>Twitter account for example</desc>
<use xlink:href="#twitter"/>
</svg>
</a>
I forked your CodePen and marked it up.
You may have already seen these two articles, but if not:
Tips for Creating Accessible SVG at SitePoint by Léonie Watson,
Accessible SVGs at CSS-Tricks by Heather Migliorisi.
I just learned that Modernizr uses two different classes for SVG support: no-svg and no-inlinesvg. I can't seem to understand the difference between the two.
According to caniuse.com, Safari 5 and below does not support inline SVG, but does support SVG. I tested this on some D3.js visualizations (them rendering SVG) and Safari 5 displays that correctly.
My first guess was that D3 produces inline SVG, but that does not seem to be the case. So I would love to hear an explanation of the difference between the two.
Inline SVG means using <svg> (and child) tags directly in your html document:
<!DOCTYPE html>
<html>
<body>
<svg width="300px" height="300px" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="50" font-size="30">My SVG</text>
</svg>
</body>
</html>
SVG Support refers to the ability to understand and display SVG files using the <embed> or <object> tags.
Dear Stack Overflow,
I am trying to reference individual SVG graphics which reside in different SVG files
via the tag and ID numbers in a master HTML5 page.
I want to be able to put onclicks on the use tags in the HTML page in order to
make a multiple choice quiz (and then keep a score which I know how to do),
The graphics are going to be bulky. Therefore, these need to be in an external svg files.
Here however, I have used a simple rectangle to make my question easier to
follow
Here is my HTML
<html>
<head></head>
<body>
<svg>
<use xlink:href="LINK.svg#link" />
</svg>
</body>
</html>
and here is My SVG
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg">
<g id="link">
<rect x="0" y="0" width="50" height="50" style="fill:red"/>
</g>
</svg>
This works exactly the way I want it to in Firefox and Opera.
However, it does not work in Chrome or Safari. Not sure about Internet Explorer
Is there an alternative method that will allow me external access to the
SVG data, and scripting from the main HTML page (because I want can keep a score
over multiple SVG elements)
You could access your SVG by using an <object> tag. This link shows you how to script from html to SVG and vice versa.
I am using the foreignObject element in SVG, however IE9 does not support this element. I am looking at a way the detect this feature. Modernizr does not detect this feature and it seems I can not use createSVGForeignObject (not available on SVGSVGElement) like they do for rectangle (createSVGRect).
Thanks!
This should work if you want to use foreignObject because it integrates html content...
<switch>
<g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" requiredExtensions="http://www.w3.org/1999/xhtml">
<foreignObject >
</foreignObject>
</g>
<text font-size="10" font-family="Verdana">
No foreignObject
</text>
</switch>
The requiredExtensions part proposed to w3c and this was their response. Firefox does implement this, but I havent tested anything else though. You may be able to get away with just the requiredFeatures attribute as Erik suggests.
If you want to test in javascript try
var supported = document.implementation.hasFeature("http://w3.org/TR/SVG11/feature#Extensibility", "1.1"); –
There is a way to test this feature in JS, the following was borrowed from a recent commit to modernizr (https://github.com/Modernizr/Modernizr/commit/ee836f083f29a9e634df731400027c24630a75f3):
var toStringFnc = ({}).toString;
Modernizr.addTest('svgforeignobject', function() {
return !!document.createElementNS &&
/SVGForeignObject/.test(toStringFnc.call(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')));
});