Accessibility #47
Comments
|
If I understand you correctly you suggest to simply copy the alt attribute to the But on stackoverflow there was a complaint that
Here is a fiddle that shows how to replaces the SVG with an img. This does not use SVGInject, but shows how a styled We could take this even further and just limit the style to some attributes like And just for the record, here is the sript for the fiddle above: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Styled img test</title>
</head>
<body style="color:red">
<svg id="svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke="currentColor" stroke-width="4" fill="green"></circle></svg>
<script>
// Copy current style into svg element's style.
// Taken from https://stackoverflow.com/a/44769098/3805458
function copyStylesInline(destinationNode, sourceNode) {
var containerElements = ["svg","g"];
for (var cd = 0; cd < destinationNode.childNodes.length; cd++) {
var child = destinationNode.childNodes[cd];
if (containerElements.indexOf(child.tagName) != -1) {
copyStylesInline(child, sourceNode.childNodes[cd]);
continue;
}
var style = sourceNode.childNodes[cd].currentStyle || window.getComputedStyle(sourceNode.childNodes[cd]);
if (style == "undefined" || style == null) continue;
for (var st = 0; st < style.length; st++){
child.style.setProperty(style[st], style.getPropertyValue(style[st]));
}
}
}
let svgEl = document.getElementById("svg");
// Make style for SVG and all child elements inline
svgEl.xmlns="http://www.w3.org/000/svg";
copyStylesInline(svgEl, svgEl);
// create data url
let svgStr = new XMLSerializer().serializeToString(svgEl);
let blob = new Blob([svgStr], {type:'image/svg+xml;charset=utf-8'});
let svgUrl = URL.createObjectURL(blob);
let imgEl = document.createElement('img');
imgEl.src = svgUrl;
// When loaded, replace <svg> with <img> element
imgEl.onload = function() {
URL.revokeObjectURL(svgUrl);
svgEl.parentNode.replaceChild(imgEl, svgEl);
};
</script>
</body>
</html>
|
|
To follow up on my idea above, here is another approach that never actually injects the SVG. This would copy some style attributes from the
Here is the jsfiddle with the proof of concept (using a hard coded SVG string). The SVG is never injected, but the image gets styled. And here is the whole thing as one single file: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Styled img test</title>
<style>
.purple-yellow {
color: teal;
--color2: goldenrod;
}
</style>
</head>
<body>
<img id="img1" class="purple-yellow"/>
<script>
let domParser = new DOMParser();
// This is the biggest issue. We have to know the properties in advance if we want to
// use custom properties, because they are not listed by getComputedStyle().
let styleProps = ['color', '--color2'];
// Create svg element.
let svgStr = '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke="var(--color2)" stroke-width="4" fill="currentColor" /></svg>';
let svgEl = domParser.parseFromString(svgStr, 'text/xml').documentElement;
// Copy style from image element to svg element
let imgEl = document.getElementById('img1');
if (styleProps != null && styleProps.length > 0) {
let imgStyle = window.getComputedStyle(imgEl);
for (let i = 0; i < styleProps.length; i++) {
svgEl.style.setProperty(styleProps[i], imgStyle.getPropertyValue(styleProps[i]));
}
}
// Create data URL from svg and set is as src attribute
let svgStr2 = new XMLSerializer().serializeToString(svgEl);
let blob = new Blob([svgStr2], {type:'image/svg+xml;charset=utf-8'});
let svgUrl = URL.createObjectURL(blob);
imgEl.src = svgUrl;
imgEl.onload = function() {
// Cleanup. We could also reuse the url if the same style with the same original
// src attribute is used again.
URL.revokeObjectURL(svgUrl);
};
</script>
</body>
</html> |
waruyama
added
accessibility
Hey there, great plugin btw!
It would be amazing if it could transfer the
imgalt attribute to the a title attribute onsvgtag. That way, we can ensure accessibility, according to W3C.I know I could just add a title attribute on the .svg file itself, but what if I have multiple languages? So yeah, it needs to transfer from the img to svg as well!
I might try to do a pull request if I have the time.
Thanks!
The text was updated successfully, but these errors were encountered: