I am adding external images to a d3-generated SVG chart, and would like to have alternative text when external image is not accessible (similar to alt attribute in img element).
But after going through MDN's SVG Image Element I don't find similar attribute. Is there a way I can add alternative text to the external image?
One way to do that is to draw the text before the image, like in this fiddle : https://jsfiddle.net/2odwd3ra/1/
<text x="350" y="350" font-size="1em" text-anchor="middle" fill="#000000">Text remplacement</text>
<image xlink:href="unknown.jpg" x="250" y="250" height="200" width="200" />
Related
This question already has answers here:
How to change color of SVG image using CSS (jQuery SVG image replacement)?
(18 answers)
Closed 1 year ago.
I have a SVG image and I plug it in using the next HTML
<img alt="" src="src/icons/speedometer-outline.svg" />
How to change the styles of this image from CSS or HTML?
When I use <object> styles aren't changing. I think that I do something incorrectly. What is the correct way?
It depends. If you were putting in your SVG via <svg> tag then you could style it that way. Like so:
svg {
style: styles;
}
OR since you're not using an <svg> tag and an img rather you can just apply a class to your image to style it. It would look something like:
<img class="classname" src="src/icons/speedometer-outline.svg" alt="" />
.classname {
style: styles;
}
If you don't want to use CSS, you could use inline styles in your HTML like so:
<img style="style: styles;" src="src/icons/speedometer-outline.svg" alt="" />
It depends what do you mean by 'changing styles of this image'.
You would have more control over the styling of the internal elements of SVG if you place it directly into html (using tag instead of tag).
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="black" />
</svg>
Then you can add classes/id's to particular elements inside the SVG.
more info in here, here and here.
You can also use tag:
<object type="image/svg+xml" data="image.svg"></object>
Is it possible to partially underline an svg text element?
The HTML tags allow for this in HTML, how do I achieve the same effect in an SVG text element?
If I write "We want <u>more</u> of this sort of thing", "more" is underlined.
Is there a way to do this with svg?
<text x="150" y="100">We want </text><text text-decoration="underline">more</text><text> of this sort of thing</text> gives me "We want " correctly displayed, but the other 2 text elements are located at x="0", y="0".
Presumably, If I want these to display as the same sentence, I need to calculate the position of the x and y coordinates and position them accordingly?
You can use the <tspan> within the <text> together with text-decoration="underline".
<svg width="500" height="500">
<text x="150" y="100">
We want <tspan text-decoration="underline">more</tspan> of this sort of thing</text>
</svg>
You're looking for <tspan> elements.
<svg width="500" height="500">
<text x="150" y="100">We want <tspan text-decoration="underline">more</tspan> of this sort of thing</text>
</svg>
This question already has an answer here:
How many levels of recursion does SVG support?
(1 answer)
Closed 2 years ago.
I have created the following SVG file:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="150" height="150">
<rect
x="5"
y="5"
width="140"
height="140"
style="fill:white;stroke:black;stroke-width:1"
id="rect2"
/>
<image
y="50"
x="80"
id="image76"
xlink:href='https://image.flaticon.com/icons/svg/46/46441.svg'
preserveAspectRatio="none"
height="60"
width="60"
/>
<image
y="50"
x="10"
id="image76"
xlink:href='https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Android_robot.png/646px-Android_robot.png'
preserveAspectRatio="none"
height="60"
width="60"
/>
</svg>
I've managed to display it using the object tag like the following and it works fine:
<object type="image/svg+xml" data="image.svg"></object>
The result is like this:
However, when I try to use the img tag I have the following result:
<img src="image.svg"/>
When I try to display this svg file with the img tag, the images that are inside it disappear. I know it happens because I'm using addresses like https://image.flaticon.com/icons/svg/46/46441.svg and https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Android_robot.png/646px-Android_robot.png for my images instead of writing a base64 image inside this svg. But because it's possible with the object tag I'm curious to know if it's also possible with the img tag. Is it possible to make the img tag open svg files like this one? Or is it a limitation of the img tag?
No documents loaded in <img> can not request any external resource, can not execute scripts, can not receive any user event.
For your bitmap image, you'd have to embedded it as a data: URI in the svg itself.
I'm having a problem with CSS styling of inline SVG code in HTML.
I have a HTML page index.html, CSS file style.css and SVG file external.svg.
In the SVG file I created a few hexagonal objects in symbol tags. I use this file only as library of svg objects.
In the HTML file I use inline SVG that's using objects from the SVG file.
And the CSS file should change color of some inline SVG text in HTML file.
This is an example of the inlined SVG code from the HTML file. The <use ...> tag imports objects from the SVG file.
<svg id="zab4text" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,300,300">
<a xlink:href="https://www.google.com" xlink:title="google">
<use xlink:href="external.svg#hex4" fill="none"/>
<text font-size="40" font-weight="bold" font-family="DejaVu Sans">
<tspan x="55" y="105">first line</tspan>
<tspan x="55" y="150">second line</tspan>
<tspan x="75" y="230">third line</tspan>
</text>
</a>
</svg>
The CSS used to style this part of code is this:
#zab4text {
width: 150px;
height: 150px;
fill: red;
}
The result should be a red text in a hexagon. The hexagon is fine, but the text is black. The fill attribute has no effect on the text.
When I want to have a red text I have to give an id directly to the <text> tag and style it. Then it works.
I looked in the inspector in google chrome 55 what's happening.
When the fill attribute was for the svg tag as in the example, I saw in the inspector that the fill color for the text was inherited from zab4text but it didn't set the color.
If the fill attribute was for the text tag, then it was his fill color and it worked fine.
Could it be some bug in google chrome?
When I first opened the HTML page the color was red, but when I opened the link it is pointing to, it changed color to black and I couldn't get the red back.
I tried it in firefox 50 and the same behavior.
I know about the google chrome external file behavior, I use simple python3 web server sudo python3 -m http.server 80.
Has somebody any idea what I am making wrong or where is the problem?
So I found the answer.
The line
<text font-size="40" font-weight="bold" font-family="DejaVu Sans">
should be
<text font-size="40" font-weight="bold" font-family="DejaVu Sans" fill="inherit">
then it will take the color from the <svg> tag in all browsers I tried.
I am completely clueless, what is going wrong with my svg pattern. I defined it in the def section of the svg and then tried to reference it. But it doesn't show up once I include the svg in an img-tag. If I open it on itself in the browser everything is good though.
See the following examples:
http://kijani.co/img/sketch/index.html
http://kijani.co/img/sketch/livingroom.svg
And my code:
<defs>
<pattern id="paper" patternUnits="userSpaceOnUse" width="200" height="200">
<image xlink:href="http://kijani.co/img/pattern/paper.jpg" width="200" height="200"/>
</pattern>
</defs>
<g id="background">
<path id="paper" fill="url(#paper)" d="..."/>
</g>
This might be a really stupid question, but I am fairly new to svg and couldn't find a solution anywhere so far.
This is svg's referencing mode probrem.
Using img element to display svg image is restrected for refering outer resources.
So you should use object element to display svg image, or embed pattern image into svg by data scheme format.