I have the following svg in a webpage. Besides the title and desc tags I have added, is there anything else I can do to make this svg more accessible? For instance, are there attributes, roles, etc. I can add to the image tags for visually impaired users?
<svg id="SvgjsSvg1001" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs">
<rect id="SvgjsRect1008" width="206" height="420" x="0" y="0" fill="#80ff72"></rect>
<rect id="SvgjsRect1010" width="206" height="420" x="246.5" y="0" fill="#80ff72"></rect>
<rect id="SvgjsRect1011" width="40.5" height="420" x="206" y="0" fill="#7ee8fa"></rect>
<image id="SvgjsImage1012" xlink:href="./assets/river-crossing/common/raft.svg" width="206" height="206" x="206" y="107"></image>
<image id="SvgjsImage1013" xlink:href="./assets/river-crossing/goat-apple-wolf/goat.svg" width="98" height="98" x="0" y="0"></image>
<image id="SvgjsImage1014" xlink:href="./assets/river-crossing/goat-apple-wolf/apple.svg" width="98" height="98" x="0" y="108"></image>
<image id="SvgjsImage1015" xlink:href="./assets/river-crossing/goat-apple-wolf/wolf.svg" width="98" height="98" x="0" y="216"></image>
<image id="SvgjsImage1016" xlink:href="./assets/river-crossing/goat-apple-wolf/farmer.svg" width="98" height="98" x="0" y="324"></image>
<title>Animation</title>
<desc>Displays the animation</desc>
</svg>
A clear 'title' and a descriptive 'desc' are essential for Screen reader users to understand what the image conveys. Genereic information like 'Animation', 'Displays Animation' etc. doesn't help visually impaired users. Make it clear and descriptive if possible.
SVG title and desc are not uniformly supported by screen readers. role="img" and aria-labelledby should be used in the SVG tag to include title and desc id to arrive at a more consistent accessible name for the image.
<svg id="SvgjsSvg1001" width="100%" height="100%" role="img" aria-labelledby="titleid descid" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs">
<rect id="SvgjsRect1008" width="206" height="420" x="0" y="0" fill="#80ff72"></rect>
<rect id="SvgjsRect1010" width="206" height="420" x="246.5" y="0" fill="#80ff72"></rect>
<rect id="SvgjsRect1011" width="40.5" height="420" x="206" y="0" fill="#7ee8fa"></rect>
<image id="SvgjsImage1012" xlink:href="./assets/river-crossing/common/raft.svg" width="206" height="206" x="206" y="107"></image>
<image id="SvgjsImage1013" xlink:href="./assets/river-crossing/goat-apple-wolf/goat.svg" width="98" height="98" x="0" y="0"></image>
<image id="SvgjsImage1014" xlink:href="./assets/river-crossing/goat-apple-wolf/apple.svg" width="98" height="98" x="0" y="108"></image>
<image id="SvgjsImage1015" xlink:href="./assets/river-crossing/goat-apple-wolf/wolf.svg" width="98" height="98" x="0" y="216"></image>
<image id="SvgjsImage1016" xlink:href="./assets/river-crossing/goat-apple-wolf/farmer.svg" width="98" height="98" x="0" y="324"></image>
<title id="titleid">Clear title</title>
<desc id="descid">Description of the image</desc>
</svg>
Related
<div>
<svg id="svg_viewport"
width="800" height="800"
style="background-color: pink"
>
<svg id="o_1"
x="10" y="10" width="200" height="200"
>
<image href="https://www.1kfa.com/table/img/image.png"
height="200" width="200"></image>
</svg>
<svg id="o_2"
x="0" y="100" width="100" height="100"
>
<rect id="r_2"
width="100" height="100"
fill="green"
></rect>
</svg>
</svg>
</div>
This works in Chromium, but in Firefox, the green rect gets cut off. It's like the browser is rendering it "inside" the image of svg o_1.
Has anyone faced this before? Workarounds?
I think I've found a workaround.
By adding a viewBox, Firefox decides to render it properly. See line 8:
<div>
<svg id="svg_viewport"
width="800" height="800"
style="background-color: pink"
>
<svg id="o_1"
x="10" y="10" width="200" height="200"
viewBox="0 0 200 200"
>
<image href="https://www.1kfa.com/table/img/image.png"
height="200" width="200"></image>
</svg>
<svg id="o_2"
x="0" y="100" width="100" height="100"
>
<rect id="r_2"
width="100" height="100"
fill="green"
></rect>
</svg>
</svg>
</div>
Please check my code link
<div class="suj_content">
<header class="suj_content_hd">
<div id="suj_content_hd_ytb"><iframe class="suj_content_hd_ytb" src="https://www.youtube.com/embed/kOc6ME2J_Us?mute=1&loop=1&playlist=kOc6ME2J_Us&autoplay=1&showinfo=0&controls=0" width="100%" height="100%" frameborder="0"></iframe></div>
<h2>
<svg id="suj_content_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 100%" preserveAspectRatio="xMidYMid slice">
<defs>
<mask id="mask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%"></rect>
<text>
<tspan x="0" dy="33.333333333333%" alignment-baseline="middle" text-anchor="start">mittel</tspan><tspan x="0" dy="23.222222222222%" alignment-baseline="middle" text-anchor="start">stand</tspan><tspan x="0" dy="23.222222222222%" alignment-baseline="middle" text-anchor="start">digital</tspan> </text>
</mask>
</defs>
<rect x="0" y="0" width="100%" height="100%"></rect>
</svg>
</h2>
</header>
How can I set the width and height of SVG tag to fit its content (the tspan tags). The number of tspan tags is not fixed.
Thanks
First: you are using an invalid viewBox attribute. No percentages are allowed. The value of the viewBox is fromX fromY width height.
I am using a viewBox where the width is 41 - the width of the bounding box of the text.
Second: I suspect you intend to cut the text from the last rect. In this case you need the text to be white.
console.log(t.getBBox())
text{font-size:16px;}
<svg id="suj_content_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 50" preserveAspectRatio="xMidYMid slice">
<defs>
<mask id="mask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%"></rect>
<text fill="white" id="t">
<tspan x="0" dy="25%" dominant-baseline="middle" text-anchor="start">mittel</tspan>
<tspan x="0" dy="25%" dominant-baseline="middle" text-anchor="start">stand</tspan>
<tspan x="0" dy="25%" dominant-baseline="middle" text-anchor="start">digital</tspan>
</text>
</mask>
</defs>
<rect x="0" y="0" width="100%" height="100%" mask="url(#mask)"></rect>
</svg>
I am trying to get areas of states to fill up based off certain criteria. I have a pattern and it is working, but it seems like the pattern fills up the territory based off the shape of the territory. I want to have the lines the same when they fill every single shape. You can see in the map below that the lines are not at the same degree nor are they the same size in each state. Is this possible? I am new to SVG.
Patterns:
<defs>
<pattern id="pattern-stripe" width="5" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(75)">
<rect width="2" height="4" transform="translate(0,0)" fill="white"></rect>
</pattern>
<mask id="mask-stripe">
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe)" />
</mask>
<pattern id="other" height="100%" width="100%" patternContentUnits="objectBoundingBox">
<image height="10" width="10" preserveAspectRatio="none" xlink:href="images/other-stripe.png" />
</pattern>
<pattern id="blue" height="100%" width="100%" patternContentUnits="objectBoundingBox">
<image height="10" width="10" preserveAspectRatio="none" xlink:href="images/blue-stripe.png" />
</pattern>
<pattern id="orange" height="100%" width="100%" patternContentUnits="objectBoundingBox">
<image height="10" width="10" preserveAspectRatio="none" xlink:href="images/orange-stripe.png" />
</pattern>
</defs>
I tried to replicate the error in CodePen, but without the complete SVG code, it didn't work. However, I think if you replace preserveAspectRatio="none" with preserveAspectRatio="xMidYMid meet" it will fix your problem. If it doesn't, but it makes progress, try the other solutions here.
You want preserveAspectRatio="xMinYMin slice". Meet will change your aspect ratio until the minimum of height or width fits the bounding box. Slice will crop the fill to the available space.
Your problem is that your patterns are using patternContentUnits="objectBoundingBox".
This means that the stripey image in your patterns is being scaled to match the size of the shape the pattern is applied to.
Demo:
<svg>
<defs>
<pattern id="blue" height="100%" width="100%" patternContentUnits="objectBoundingBox">
<image height="1" width="1" preserveAspectRatio="none" xlink:href="http://placekitten.com/100/100" />
</pattern>
</defs>
<rect x="0" y="0" width="150" height="150" fill="url(#blue)"/>
<rect x="175" y="25" width="100" height="100" fill="url(#blue)"/>
</svg>
To fix this, you need to use patternContentUnits that are independent of the size of the shape the pattern is applied to. You do this by specifying patternContentUnits="userSpaceOnUse".
<svg>
<defs>
<pattern id="blue" height="100%" width="100%" patternContentUnits="userSpaceOnUse">
<image height="150" width="150" preserveAspectRatio="none" xlink:href="http://placekitten.com/100/100" />
</pattern>
</defs>
<rect x="0" y="0" width="150" height="150" fill="url(#blue)"/>
<rect x="175" y="25" width="100" height="100" fill="url(#blue)"/>
</svg>
I'm trying to put some text as labels inside some scaled elements, and the text is too big to fit in the container. What can I do here?
<div class="t_container">
<div class="t_x" style="position: relative;">
<svg position="absolute" viewBox="0 0 6 1" preserveAspectRatio="none">
<g>
<rect x="0" y="0" width="1" height="0.4"><title>Nov-21</title></rect>
<text x="0.5" y="0.5" fill="red">A<text>
</g>
<rect x="1" y="0" width="1" height="1"><title>Nov-22</title></rect>
<rect x="2" y="0" width="1" height="1"><title>Nov-23</title></rect>
<rect x="3" y="0" width="1" height="1"><title>Nov-24</title></rect>
<rect x="4" y="0" width="1" height="1"><title>Nov-25</title></rect>
<rect x="5" y="0" width="1" height="1"><title>Nov-26</title></rect></svg>
</div>
Here is a codepen with the result.
You have a very small custom viewport="0 0 6 1" size. 6px - width, 1px - height, so the font can not be displayed with such parameters.
I increased the size of the viewBox 100 times viewBox="0 0 600 100"
Squares for clarity painted in different colors. You can change their coloring according to your choice.
The text is placed inside the squares. I hope that's exactly what you wanted when you used the command
<title> Nov-24 </ title> inside the squares.
But the command <title> in SVG is a system tooltip, the information from which appears when you hover the cursor.
The size of the tooltip and its font can not be changed, so I added in the squares more tags <text> ... </ text>, the parameters of which you can change.
<div class="t_container">
<div class="t_x" style="position: relative;">
<svg position="absolute" viewBox="0 0 600 100" >
<g>
<rect x="0" y="0" width="100" height="40"><title>Nov-21</title></rect>
<text x="35" y="75" font-size="36" fill="red">A</text>
</g>
<rect x="100" y="0" width="100" height="100" fill="orange">
<title>Nov-22</title></rect>
<text x="125" y="55" font-size="18" fill="white">Nov-22</text>
<rect x="200" y="0" width="100" height="100" fill="orangered">
<title>Nov-23</title></rect>
<text x="225" y="55" font-size="18" fill="white">Nov-23</text>
<rect x="300" y="0" width="100" height="100" fill="green">
<title>Nov-24</title></rect>
<text x="325" y="55" font-size="18" fill="white">Nov-24</text>
<rect x="400" y="0" width="100" height="100" fill="dodgerblue">
<title>Nov-25</title></rect>
<text x="425" y="55" font-size="18" fill="white">Nov-25</text>
<rect x="500" y="0" width="100" height="100" fill="yellowgreen">
<title>Nov-26</title></rect>
<text x="525" y="55" font-size="18" fill="white">Nov-26</text>
</svg>
</div>
I'm trying to fill SVG image with a pattern in HTML, but I'm not successfull. If I fill with the pattern path, it works. But I cannot apply it onto svg image.
Could you help me please?
Here is example.
Here is example code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="400" height="400">
<defs>
<pattern id="image" x="0" y="0" width="400" height="400" patternUnits="userSpaceOnUse">
<image x="0" y="0" xlink:href="latka.jpg" width="100" height="100" />
</pattern>
</defs>
<image x="0" y="0" width="400" height="400" xlink:href="kosile.svg" fill="url(#image)"/>
</svg>
It makes no sense to apply a fill attribute to an embedded SVG. I assume what you were trying to do is create a tiled background on which to superimpose the linked SVG. The easiest way to do this is by adding a <rect> element filled with the background pattern, then put your embedded SVG image on top of this.
Here's an example:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200" viewBox="0 0 200 200">
<defs>
<!-- define a pattern using a yellow tile image -->
<pattern id="bgimg" x="0" y="0" width="60" height="60"
patternUnits="userSpaceOnUse">
<image x="0" y="0" width="60" height="60"
xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Shades_of_yellow.png/60px-Shades_of_yellow.png" />
</pattern>
</defs>
<!-- use this pattern to fill the SVG background -->
<rect x="0" y="0" width="200" height="200" fill="url(#bgimg)" />
<!-- Embed another SVG (purple circle) on top of this background -->
<image x="40" y="40" width="120" height="120"
xlink:href="http://upload.wikimedia.org/wikipedia/commons/5/5e/FF0084_circle.svg" />
</svg>