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>
Related
This question already has an answer here:
How many levels of recursion does SVG support?
(1 answer)
Closed 1 year ago.
i have created an SVG which has an image embedded.
I did this because i want the descriptions to be scalable.
The problem is, when i load the SVG only in chrome, the image is displayed.
When the svg is embedded in an img tag in the html though, i dont see the image.
When i write the svg code in the html file on the other hand the image is displayed.
I think the problem might be a pathing issue but im not sure as i dont get any errors displayed.
The SVG and IMG are in the same folder.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1189.851"
height="539.932">
<image overflow="visible" width="1190" height="540" href="/pics/mashup/e-55211-10-piww-000.png"
transform="translate(0 -.034) scale(.9999)"/>
<g stroke="#1D1D1B" stroke-width="4.693" stroke-miterlimit="10">
<path fill="#FFF" d="M998.689 395.155l-10.44 21.628-67.39-33.204 10.454-21.633z"/>
<path fill="#FFF" d="M911.808 448.549l-22.247-8.621 26.866-70.699 22.247 8.625zM889.081
449.676h23.832v36.11h-23.832z"/>
<path fill="#FFF" d="M920.424 447.646c-2.273 10.825-12.828 17.741-23.553 15.44-10.729-2.301-17.576-12.942-
15.299-23.79 2.283-10.839 12.828-17.75 23.563-15.45 10.715 2.305 17.572 12.952 15.289 23.8zM1012.159
414.767c-4.812 9.959-16.71 14.093-26.559 9.24-9.863-4.854-13.955-16.857-9.148-26.825 4.804-9.959 16.696-
14.089 26.555-9.239 9.858 4.857 13.951 16.861 9.152 26.824zM946.415 380.806c-3.928 10.345-15.413 15.514-
25.66 11.55-10.229-3.969-15.34-15.577-11.417-25.917 3.933-10.34 15.422-15.514 25.656-11.545 10.248 3.968
15.362 15.564 11.421 25.912z"/>
<path fill="none" stroke-linecap="round" d="M980.243 420.437c-6.976 7.153-6.77 18.754.453 25.931M1009.065
446.372c6.972-7.159 6.774-18.75-.444-25.94"/>
</g>
I tried both and they dont work when loaded from an img tag, but do work when opened in browser or inspecting the element:
href="/pics/mashup/e-55211-10-piww-000.png"
href="e-55211-10-piww-000.png"
Thats how i want it to work.
<li class="c-linkedarea" data-content="img2 img" data-display="flex">
<img src="/pics/mashup/e-55211-10-piww-000.svg" alt="Microwall VPN Funktionsgrafik">
</li>
Thanks in advance
The solution to your question has been perfectly addressed by Erik Dahlström in his post here
Here is what CSS tricks has to say about it:
If “inline” SVG just isn’t your jam (remember it does have some legit drawbacks like being hard to cache), you can link to an SVG file and retain the ability to affect its parts with CSS by using .
Basically, you need to put your svg source inside the html <object> element like below:
<object data="pathToYourSVG.svg" type="image/svg+xml">
<img src="backUpImgFileIfSVGDoesNotWork.jpg" />
</object>
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 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" />
My research came up with a several ways to insert SVG images inside an html page.
Using <img> is the most simple one but lack of ability as coloring the icons, which is my main need. So, I've read about using <object> but this still doesn't let me styling it using css fill command.
Putting the bulk of <svg> data is also non acceptable since I want to use the images as a refernced images.
I've also read about jQuery solution but I use angularJS.
So, I've read a lot about the ability of SVG Icons, and how better they are rather than the old PNG-Sprite or the IconFonts hype. but unfortunatelly, I cant find any good reference for using it. Can anyone help me here?
tried this already, this doesn't work:
html:
<object data="your.svg" type="image/svg+xml" id="myImage"></object>
css:
#myImage {
fill: #fff;
}
For <img> manupulation, read How to change color of SVG image using CSS (jQuery SVG image replacement)?
For embedding you have 3 choices:-
<object id="myObj" data="image.svg" width="200px" height="200px" type="image/svg+xml"></object>
<embed id="myEmb" src="image.svg" type="image/svg+xml" width="200px" height="200px" ></embed>
<iframe id="myIfr" src="image.svg" width="200" height="200" style="border:0" ></iframe>
Say the image.svg contains this circle in red: <circle id="redcircle" cx="100" cy="100" r="50" fill="transparent" stroke="red" stroke-width="3""/>
To manipulate this color, try this function: ColObj('myObj','blue'), ColObj('myEmb','blue') or ColObj('myIfr','blue')
function getSubDocument(embedding_element)
{
if (embedding_element.contentDocument)
{
return embedding_element.contentDocument;
}
else
{
var subdoc = null;
try {
subdoc = embedding_element.getSVGDocument();
} catch(e) {}
return subdoc;
}
}
function ColObj(elem, color)
{
var elms = document.getElementById(elem);
var subdoc = getSubDocument(elms);
if (subdoc)
subdoc.getElementById("redcircle").setAttribute("stroke", color);
}
This guide from CSS tricks is the best reference I've found so far.
Your options are, unfortunately, pretty limited to use CSS to style an SVG that's not inlined. It involves either embedding the styles inside the SVG file or linking to the stylesheet from within the SVG itself.
Both techniques are discussed in the CSS tricks guide.
Here's a JSFiddle demonstrating the linked CSS technique.
Here's how it works:
Link to the stylesheet from within the CSS and add classes to the individual paths:
<?xml-stylesheet type="text/css" href="mysvg.css"?>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48">
<path class="demo-content" d="M11.31 44.5l12.69-12.3 12.691 12.3 7.809-8.2-12.69-12.3 12.69-12.3-7.809-8.2-12.691 12.3-12.69-12.3-7.81 8.2 12.691 12.3-12.691 12.3 7.81 8.2z" fill="rgb(98.34%, 88.24%, 32.2%)"/>
<path class="demo-border" d="M11.31 44.5l12.69-12.3 12.691 12.3 7.809-8.2-12.69-12.3 12.69-12.3-7.809-8.2-12.691 12.3-12.69-12.3-7.81 8.2 12.691 12.3-12.691 12.3 7.81 8.2z" stroke="#ccc" stroke-linecap="square" fill="none"/>
</svg>
Create the css file, in this case mysvg.css:
.demo-content {
fill: #FF0000;
}
If you're trying to conditionally style the SVG, though, you may have no chose other than embed it.
I know that I can set a svg file as the src of an HTML img element like this:
<img src="mySVG.svg"/>
but can I somehow set a dynamic SVG element as the src of an img?
<svg id="mySVGElement">
...
</svg>
<img src="?"/>
You can do this with JavaScript:
var svg = document.querySelector('svg'),
img = document.querySelector('img');
setImageToSVG(img,svg);
function setImageToSVG(img,svg){
var xml = (new XMLSerializer).serializeToString(svg);
img.src = "data:image/svg+xml;charset=utf-8,"+xml;
}
If your SVG element is dynamic (changing) then you would need to re-run this code each time the SVG element changed.
Demo: http://jsfiddle.net/3PfcC/
Alternatively, here's a demo showing #Robert's answer, using another <svg> element to reference the first, live:
Demo: http://jsfiddle.net/3PfcC/3/
<svg id="src" xmlns="http://www.w3.org/2000/svg" …>
<!-- Your SVG here -->
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink" …>
<use x:href="#src" x="80" y="30" width="100" height="100" />
</svg>
The demo also shows that you can resize and otherwise transform the referenced SVG document, and that the reference is live: changes to the original are immediately reflected in the <use>.
This updates the accepted answer from Phrogz (8 years after it!)
The sample does not work on Chrome or Firefox (the image appears broken)
changing to
img.src = "data:image/svg+xml;base64,"+btoa(xml);
I am not sure of the reason why the original stopped working but this may help someone landing here.