I have a reusable SVG component that contains some templated content. As part of the component default function, I'd like to include a shadow/reflection visual effect.
So, easy, right; use and done. Except, here's a reduced example to show the problem I'm having:
<svg>
<use xlink:href="#reflect"></use>
<g id="reflect">
<templated-content class="blue" />
</g>
</svg>
<svg>
<use xlink:href="#reflect"></use>
<g id="reflect">
<templated-content class="red" />
</g>
</svg>
Will each reflection be red, or blue? Because the element can be reused, and each instance is potentially different, I can't rely on a constant id attribute.
I'd prefer to avoid assigning id pairs to each instance via script. I couldn't find anything useful in the W3C xlink spec, but there's enough jargon there that I may have missed something.
Is there a supported way to include a relative use, or perhaps a similar result via another declarative feature?
EDIT: I know it is invalid to include multiple elements with the same id. That is why I want a way to create a reflection from a relative declarative reference. Can this be done?
Having two items with the same id in the same document is invalid.
A <use> element must point to an id and each id must be unique, there's no such thing as a relative <use>
Each reflection should be blue.
You'll need to generate unique ids.
Related
What is the proper way to make an inline svg accessible when it is used multiple times on the same page? An example would be a twitter icon in the header and footer, or a logo that is repeated throughout the page. From my research I believe the following is best for unique svgs:
<svg aria-labelledby="title">
<title id="title" lang="en">Red Rectangle</title>
<g>
<rect x="0" y="0" width="100" height="50" fill="red" />
</g>
</svg>
Using aria-labelledby and title, as well as description if needed. However in the case of an inline svg that is repeated, I have not been able to find an answer on the web. Is something like the following acceptable?
<svg role="img">
<title>Red Rectangle</title>
<g>
<rect x="0" y="0" width="100" height="50" fill="red" />
</g>
</svg>
Or what about just using aria-label? Thanks in advance!
The human side
Why your image is repeated multiple times ?
While choosing an alternative text for your image, remember that there are two kind of images on the web: illustrative images, and functional images.
The former don't absolutely need an alt text, while the later absolutely requires an alt text.
IF you give an alt text for the former, it should be a description of the image, while the alt text for the later must rather tell what the action is about than a simple visual description.
You can look at this question and my answer for more details about that.
IF your images are repeated multiple times, it's quite probable that they are functional ones. If we assume that it's the case:
If they all trigger exactly the same action, they must all have exactly the same label. Examples: several links to the same page, or a share icon at the beginning and the end of an article
If they don't trigger exactly the same action, or not on the same item, then they must all have different label. Example: add an item to cart. In that case, ideally, the label of the image should also tell on which item it operates.
The technical side
If your images are functional and all doing exactly the same action (see above), your problem is that you can't have multiple times the same id for a whole page.
Technically, referencing a <title> present in another SVG should work, but I would still prefer avoid it just in case. Inline SVG aren't as well supported than good old <img/> by screen readers.
It would be better to use good old <img/>, or generate unique ids.
Note that aria-label and aria-labelledby are guaranteed to work with all screen readers only on interactive/focusable elements.
If your images are focusable, then fine as long as all id are unique, although it would even be better to have the alt text as a visually hidden text in an enclosing link or button.
IF your images aren't focusable, keep in mind that aria-label/aria-labelledby may be totally ignored, but anyway in that case you have another accessibility problem: in principle, functional image should be made focusable, otherwise keyboard only users won't be able to trigger the action.
I've searched all over the place and not have any success with this.
I'm making SVGs like the following one in order to make them scalable, and also help people who are dyslexic so they can highlight the text and use plugins like Read Out Loud:
https://www.ole.bris.ac.uk/bbcswebdav/institution/TEL/TEL%20guides/Published%20TEL%20guides/Replay/record-now-instructions-web.svg
But I've not been able to get my copy of NVDA to read out the tab-indexed fields as I tab through them. I've tried fields and aria-label on various things...
Is there something simple I can change so NVDA (and similar screen readers) will read out the text as I tab through (NVDA does this on HTML pages).
Or should I just put the full description of all the text in my description at the top?
I noticed you have role="img" in your svg root. That's borking everything, since it tells the accessibility API that it is just a single element, whose accessible name is always aria-labelledby="svgTitle svgDesc"
Try changing that to role="graphics-document" (or perhaps role="application" if you want fancier interactions) and I think you'll have a whole lot more luck.
The other option is to remove the role attribute from the <svg> element. It sounds counterintuative, but it should make any <text> elements accessible.
For an example, see tip 5 in this SitePoint article, which has great background and other helpful tips on making SVG more accessible in different use cases:
Tips for Creating Accessible SVG
From the above article:
<svg version="1.1" width="300" height="200" aria-labelledby="title desc">
<title id="title">Green rectangle</title>
<desc id="desc">A light green rectangle with rounded corners and a dark green border.</desc>
<rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
<text x="35" y="30" font-size="1em" text-anchor="middle" fill="#000000">Website</text>
</svg>
This is a simple question but I can't find an answer that seems certain.
In an SVG where you'd see something like
<g id="Layer_3" data-name="Layer 3"><g id="Layer_3-1" data-name="Layer 1">
Is this something the SVG actually needs to have? They look the same when removed so I'm wondering if they're solely for identification?
No they are not required.
Even though if you are re-using same svg on a single page.
For example two SVG's with id="edit" it will cause ADA Compliance issue.
First, let's see what is a group and what is a symbol.
A group <g> is a container used to group other SVG elements.
A <symbol> is used to define graphical template objects.
Then, let's find out what they have in common.
They both wrap a collection of other elements.
They can both be referenced with <use>.
And that's about all there is, as to their function. Neither of these elements draws something by itself.
So, what is the difference and when to prefer one over another?
The contents of a <symbol> are not directly renderered
The contents of a <g> are directly rendered unless the <g> is itself not rendered. E.g. if the <g> were in a symbol.
So if you wrote something like
<svg>
<g id="g">
<rect id="g-rect" .../>
</g>
<symbol id="s">
<rect id="symbol-rect" .../>
</symbol>
<use href="#g" transform="translate(100,100)" />
<use href="#s"/>
</svg>
We'd see 3 rect elements rendered, the g-rect would display twice, once via the <g> element and again via the <use> reference. The symbol-rect would only display once i.e. via the <use> element.
A symbol element also supports viewBox and preserveAspectRatio properties, a g element does not.
The SVG specification does document this...
The key distinctions between a ‘symbol’ and a ‘g’ are:
A ‘symbol’ element itself is not rendered. Only instances of a ‘symbol’ element (i.e., a reference to a ‘symbol’ by a ‘use’ element) are rendered.
A ‘symbol’ element has attributes ‘viewBox’ and ‘preserveAspectRatio’ which allow a ‘symbol’ to scale-to-fit within a rectangular viewport defined by the referencing ‘use’ element.
I have images I'm trying to blur across different browsers. The best way I've found is using SVG. I have multiple of these SVGs on one page.
How do I treat the id, since ids should be unique on a page.
<svg>
<filter id="blur"><feGaussianBlur in="SourceGraphic" stdDeviation="9" /></filter>
<image xlink:href="/img.jpg" width="100%" height="100%" preserveAspectRatio="xMinYMin slice" filter="url(#blur)" />
</svg>
<svg>
<filter id="blur"><feGaussianBlur in="SourceGraphic" stdDeviation="9" /></filter>
<image xlink:href="/img2.jpg" width="100%" height="100%" preserveAspectRatio="xMinYMin slice" filter="url(#blur)" />
</svg>
If the filters are all identical, then you only need one on the page. You can remove the duplicate filters from all but one SVG. Or you can move the filter to a separate <svg> that can be referenced by all the others.
The main way that duplicate id attributes will break SVGs is that it is browser dependent which one gets referenced. However, that also means that, if all your filters are identical, then that problem won't affect you. Because it won't matter which filter is chosen by any particular broswer.
If you use an SVG injector the IDs will be made unique by during the injection. SVGInject adds a random suffix to each referenced ID during injection to avoid ID conflicts. For example filter1 may become filter1--inject-Ed83kO72.