How to apply a style to an embedded SVG? - html

When an SVG is directly included in a document using the <svg> tag, you can apply CSS styles to the SVG via the document's stylesheet. However, I am trying to apply a style to an SVG which is embedded (using the <object> tag).
Is it possible to use anything such as the following code?
object svg {
fill: #fff;
}


Short answer: no, since styles don't apply across document boundaries.
However, since you have an <object> tag you can insert the stylesheet into the svg document using script.
Something like this, and note that this code assumes that the <object> has loaded fully:
var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }"; // add whatever you need here
svgDoc.getElementById("where-to-insert").appendChild(styleElement);
It's also possible to insert a <link> element to reference an external stylesheet:
var svgDoc = yourObjectElement.contentDocument;
var linkElm = svgDoc.createElementNS("http://www.w3.org/1999/xhtml", "link");
linkElm.setAttribute("href", "my-style.css");
linkElm.setAttribute("type", "text/css");
linkElm.setAttribute("rel", "stylesheet");
svgDoc.getElementById("where-to-insert").appendChild(linkElm);
Yet another option is to use the first method, to insert a style element, and then add an #import rule, e.g styleElement.textContent = "#import url(my-style.css)".
Of course you can directly link to the stylesheet from the svg file too, without doing any scripting. Either of the following should work:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="my-style.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg">
... rest of document here ...
</svg>
or:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<link href="my-style.css" type="text/css" rel="stylesheet"
xmlns="http://www.w3.org/1999/xhtml"/>
</defs>
... rest of document here ...
</svg>
Update 2015: you can use jquery-svg plugin for apply js scripts and css styles to an embedded SVG.


You can do this without javsscrpt by putting a style block with your styles inside the SVG file itself.
<style type="text/css">
path,
circle,
polygon {
fill: #fff;
}
</style>


If the only reason for using the tag to inlcude the SVG is that you do not want to clutter your source code with the markup from the SVG, you should take a look at SVG injectors like SVGInject.
SVG injection uses Javascript to inject an SVG file inline into your HTML document. This allows for clean HTML source code while making the SVGs fully styleable with CSS. A basic example looks like this:
<html>
<head>
<script src="svg-inject.min.js"></script>
</head>
<body>
<img src="image.svg" onload="SVGInject(this)" />
</body>
</html>


Based on #Erik Dahlström answer, found a short path as follow:
let svg_objecst = document.getElementsByClassName('svg-object')
const forceStylingObjSvg = (svg)=>{
var svgDoc = svg.contentDocument;
svgDoc.firstElementChild.setAttribute('fill','blue')
}
Array.from(svg_objecst).forEach((obj)=>{
obj.addEventListener('load',()=>forceStylingObjSvg(obj))
})


You can create a custom element to inject the SVG file into your html.
This way, the SVG will be inlined, and you can easily apply styles using CSS.
This custom element will work just like the <object> or <embed> tags. The only difference is that <object> or <embed> tags injects the data in a shadow root, which prevents styling from the parent document, while <custom-svg> injects the data in the document itself.
I have tried too many ways to style my SVG images, and this was the easiest and more flexible way i have found so far.
<html>
<head>
<style>
.blue {
fill: blue;
}
.red {
fill: red;
}
</style>
</head>
<body>
<custom-svg class="blue" src="icon.svg"></custom-svg>
<custom-svg class="red" src="icon.svg"></custom-svg>
<script>
class CustomSVG extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
fetch(this.getAttribute('src'))
.then(response => response.text())
.then(text => {
this.innerHTML = text;
});
}
}
customElements.define('custom-svg', CustomSVG);
</script>
</body>
</html>
Notes
The SVG image must not have the "fill" attribute if you want, for example, change the fill color using CSS.


custom-svg works very good, for width style use this:
custom-svg svg{
max-width:64px;
max-height:64px;
}

Related

Why not wrap content within `<noscript>`?

It seems common to use the following HTML structure to accommodate
users who have enabled/disable javascript:
<html>
<style>
div.body { display:none; }
.body > ... { ... }
</style>
<script>
document.onload( function() {
javascript(CONTENT => div.body);
});
</script>
<noscript>
<style>
body > :not(noscript) {
display:none;
}
</style>
</noscript>
<body>
<div class="body">
</div>
<noscript class="body">
CONTENT
</noscript>
</body>
</html>
The mechanism uses a <div>; whose display attribute, initially set
to none, is subsequently set to block|grid|etc. and populated with
CONTENT once the page is loaded; alongside a <noscript>; which is
pre-populated with CONTENT.
No one seems to suggest simply popping the CONTENT within
<noscript> into the <body> when javascript is available as follows
:
<html>
<style>
.body { ... }
.body > ... { ... }
</style>
<script>
document.onload( function() {
let noscript = document.querySelector("noscript");
noscript.outerHTML = noscript.innerHTML;
});
</script>
<noscript>
<style>
body > noscript {
display:content;
}
</style>
</noscript>
<body>
<noscript>
CONTENT
</noscript>
</body>
</html>
Here the CONTENT within noscript is displayed by default and if
there is javascript the tag is simply dropped; the specification
states the content of noscript should be parsable and that the parsed
result be readily assignable as noscript.outerHTML.
The first method requires one to repeat ones CONTENT in both the
noscript and wrapped into the javascript that populates the div;
this isn't especially DRY. I can't see that populating a page through
javascript calls is any faster then assigning ELEMENT.outerHTML; if
this is not true let me know. The second method relies upona bit of
CSS trickery. Finally both methods seem subject to flicker.
The only reasons I can think of for not using the latter structure are
:
SEO; I can't see how though e.g. you only have to scan CONTENT once, it sn't repeated, it isn't bundled between javascript, better
aria/a11y support.
Frontend framework e.g. they all rely on the first structure
historic reasons e.g. setting noscript.outerHTML breaks events or something ut they are broken under the spec anyhow, jQuery.unwrap
being a "recent" development, browser woes.

create switch for changing theme intead of browser page style html

I added a theme in my HTML page by:
<link rel="alternate stylesheet" href="css/dark.css" title="dark">
this creates an option to switch theme from view>style in browser as it is expected to. I want to create a switch in the page itself for changing the theme. <button>Switch Theme</button>will create a button but how do I make it switch theme?

You should trigger a change in the href attribute of the <link> tag on the click of the button, as demonstrated:
HTML
<link rel="stylesheet" href="dark.css" id="theme">
<button id="switch">Switch Theme</button>
JavaScript
document.getElementById('switch').onclick = function() {
if (document.getElementById('theme').href == "dark.css") {
document.getElementById('theme').href = "light.css";
} else {
document.getElementById('theme').href = "dark.css";
}
};
Now, the dark.css and light.css would contain different styles for your elements for both the themes respectively. For example:
dark.css
body{
background: #000;
}
light.css
body{
background: #fff;
}

this is very simple you need to bind the click to function and call it:
Replacing css file on the fly (and apply the new style to the page)

Applying CSS to img-tag-embedded SVG images

On my page I'm using the img tag to embed SVG images. Now I wanted to apply some css onto them. This works well as long as you copypaste the SVG source code directly into your page. However, if I embed them using the img src attribute, it doesn't.
Is there a way to make that work?
<style type="text/css">
path:hover {
fill:white;
}
</style>
<img src="my.svg" />
Thanks in advance!

Well it can be achieved through JQuery ( Work Around ) , this Jquery function will convert <img> tag that hold current svg image into a <svg> inline tags, you can view it in your browser debugger.In short it will mimic as if directly inserted the SVG image.
<script type="text/javascript">
$(document).ready(function() {
$('#img').each(function(){
var img = $(this);
var image_uri = img.attr('src');
$.get(image_uri, function(data) {
var svg = $(data).find('svg');
svg.removeAttr('xmlns:a');
img.replaceWith(svg);
}, 'xml');
});
});
</script>
<img id='img' src="my.svg" />

I do not think this is possible. You are correct in that using inline-SVG will allow you to manipulate the parts of the svg, but including it in an img tag will not. See http://css-tricks.com/using-svg/

How do I style ShadowDOM elements using external CSS in Firefox?

I'm trying to build a custom HTML element. The problem is that I'm not able to apply styles to the Shadow DOM elements provided using external CSS. The code is working in Chrome but not in Firefox.
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
console.log('Element creation started...');
var inputTextElement = document.createElement('input');
inputTextElement.type = 'text';
inputTextElement.className = 'simpleElem';
// Shadow DOM root
var shadowRoot = this.createShadowRoot();
shadowRoot.appendChild(inputTextElement);
console.log('Element creation ended...');
};
var SimpleElement = document.registerElement('simple-element', { prototype: proto });
simple-element {
}
simple-element::shadow .simpleElem {
height: 30px;
margin: 0px;
padding: 0px;
width: 180px;
}
<!doctype html>
<html>
<head>
<title>HTML5 | Custom Elements</title>
<link type="text/css" rel="stylesheet" href="simple-elem.css">
<script type="text/javascript" src="simple-elem.js"></script>
</head>
<body>
<simple-element></simple-element>
</body>
</html>
Not able to figure out what is wrong with Firefox.

As noted by Gábor Imre, Shadow DOM is not enabled by default in Firefox because it is still under development. You can, however, use a polyfill to get pretty good Shadow DOM behavior in all browsers that don't support it.. If you do, you'll then need to use polyfill-next-selector to obtain the behavior you want.

Update: FF Shadow DOM support has arrived.
Firefox has no Shadow DOM support yet, see CanIUse.com. I recommend sticking to Chrome.
EDIT: FF Nightly has some support, it can be enabled manually.

While Shadow DOM in general has been supported in Firefox for a while now (invalidating the two other answers), with Firefox 72 you can now target custom/Shadow DOM elements via the part attribute and ::part() pseudo-element, respectively:
//this JS boilerplate adapted from MDN
let template = document.getElementById("simple-element");
globalThis.customElements.define(template.id, class extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content);
}
});
simple-element::part(shadow) {
height: 30px;
margin: 0;
padding: 0;
width: 180px;
background: green;
}
<template id="simple-element">
<div part="shadow">Hi</div>
</template>
<simple-element></simple-element>
Obviously this code looks a lot different from what your question code looks like because the Shadow DOM spec/implementations have changed quite a lot since 2014.

Inputting a default image in case the src attribute of an html <img> is not valid?

Is there any way to render a default image in an HTML <img> tag, in case the src attribute is invalid (using only HTML)? If not, what would be your lightweight way to work around it?

You asked for an HTML only solution...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Object Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<p>
<object data="https://stackoverflow.com/does-not-exist.png" type="image/png">
<img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" alt="Stack Overflow logo and icons and such">
</object>
</p>
</body>
</html>
Since the first image doesn't exist, the fallback (the sprites used on this web site*) will display. And if you're using a really old browser that doesn't support object, it will ignore that tag and use the img tag. See caniuse website for compatibility. This element is widely supported by all browsers from IE6+.
* Unless the URL for the image changed (again), in which case you'll probably see the alt text.

This works well for me. Maybe you wanna use JQuery to hook the event.
<img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';" alt="add alternative text here">
Updated with jacquargs error guard
Updated: CSS only solution
I recently saw Vitaly Friedman demo a great CSS solution I wasn't aware of. The idea is to apply the content property to the broken image. Normally :after or :before do not apply to images, but when they're broken, they're applied.
<img src="nothere.jpg" alt="add alternative text here">
<style>
img:before {
content: ' ';
display: block;
position: absolute;
height: 50px;
width: 50px;
background-image: url(ishere.jpg);
}
</style>
Demo: https://jsfiddle.net/uz2gmh2k/2/
As the fiddle shows, the broken image itself is not removed, but this will probably solve the problem for most cases without any JS nor gobs of CSS. If you need to apply different images in different locations, simply differentiate with a class: .my-special-case img:before { ...

Found this solution in Spring in Action 3rd Ed.
<img src="../resources/images/Image1.jpg" onerror="this.src='../resources/images/none.jpg'" />
Update:
This is not an HTML only solution... onerror is javascript

a simple img-element is not very flexible so i combined it with a picture-element. this way no CSS is needed. when an error occurs, all srcset's are set to the fallback version. a broken link image is not showing up. it does not load unneeded image versions. the picture-element supports responsive design and multiple fallbacks for types that are not supported by the browser.
<picture>
<source id="s1" srcset="image1_not_supported_by_browser.webp" type="image/webp">
<source id="s2" srcset="image2_broken_link.png" type="image/png">
<img src="image3_fallback.jpg" alt="" onerror="this.onerror=null;document.getElementById('s1').srcset=document.getElementById('s2').srcset=this.src;">
</picture>

Simple and neat solution involving some good answers and comment.
<img src="foo.jpg" onerror="this.src='error.jpg';this.onerror='';">
It even solve infinite loop risk.
Worked for me.

<style type="text/css">
img {
background-image: url('/images/default.png')
}
</style>
Be sure to enter dimensions of image and whether you want the image to tile or not.

I don't think it is possible using just HTML. However using javascript this should be doable. Bassicly we loop over each image, test if it is complete and if it's naturalWidth is zero then that means that it not found. Here is the code:
fixBrokenImages = function( url ){
var img = document.getElementsByTagName('img');
var i=0, l=img.length;
for(;i<l;i++){
var t = img[i];
if(t.naturalWidth === 0){
//this image is broken
t.src = url;
}
}
}
Use it like this:
window.onload = function() {
fixBrokenImages('example.com/image.png');
}
Tested in Chrome and Firefox

<img style="background-image: url(image1), url(image2);"></img>
Use background image that let you add multiple images.
My case:
image1 is the main image, this will get from some place (browser doing a request)
image2 is a default local image to show while image1 is being loaded.
If image1 returns any kind of error, the user won't see any change and this will be clean for user experience

If you're using Angular/jQuery then this might help...
<img ng-src="{{item.url}}" altSrc="{{item.alt_url}}" onerror="this.src = $(this).attr('altSrc')">
Explanation
Assuming that item has a property url that might be null, when it is then the image will show up as broken. That triggers execution of onerror attribute expression, as described above. You need to override the src attribute as described above, but you will need jQuery to access your altSrc. Couldn't get it to work with vanilla JavaScript.
Might seem a little hacky but saved the day on my project.

angular2:
<img src="{{foo.url}}" onerror="this.src='path/to/altimg.png'">

An HTML only solution, where the only requirement is that you know the size of the image that you're inserting. Will not work for transparent images, as it uses background-image as a filler.
We can successfully use background-image to link the image that appears if the given image is missing. Then the only problem is the broken icon image - we can remove it by inserting a very big empty character, thus pushing the content outside the display of img.
img {
background-image: url("http://placehold.it/200x200");
overflow: hidden;
}
img:before {
content: " ";
font-size: 1000px;
}
This image is missing:
<img src="a.jpg" style="width: 200px; height: 200px"/><br/>
And is displaying the placeholder
An CSS only solution (Webkit only)
img:before {
content: " ";
font-size: 1000px;
background-image: url("http://placehold.it/200x200");
display: block;
width: 200px;
height: 200px;
position: relative;
z-index: 0;
margin-bottom: -16px;
}
This image is there:
<img src="http://placehold.it/100x100"/><br/>
This image is missing:
<img src="a.jpg"/><br/>
And is displaying the placeholder

Update: 2022 (works on chrome still!!)
I recently had to build a fall back system which included any number of fallback images. Here's how I did it using a simple JavaScript function.
HTML
<img src="some_image.tiff"
onerror="fallBackImg(this);"
data-src-1="some_image.png"
data-src-2="another_image.jpg">
JavaScript
function fallBackImg(elem){
elem.error = null;
let index = elem.dataset.fallIndex || 1;
elem.src = elem.dataset[`src-${index}`];
elem.dataset.fallIndex = ++index;
}
I feel like it's a pretty lightweight way of handling many fallback images.
If you want "HTML only" then this
<img src="some_image.tiff"
onerror="this.error = null;
let i = this.dataset.i || 1;
this.src = this.dataset[`src-${i}`];
this.dataset.i = ++i;"
data-src-1="some_image.png"
data-src-2="another_image.jpg">

A modulable version with JQuery, add this at the end of your file:
<script>
$(function() {
$('img[data-src-error]').error(function() {
var o = $(this);
var errorSrc = o.attr('data-src-error');
if (o.attr('src') != errorSrc) {
o.attr('src', errorSrc);
}
});
});
</script>
and on your img tag:
<img src="..." data-src-error="..." />

There is no way to be sure the myriad number of clients (browsers) that will try to view your page. One aspect to consider is that email clients are defacto web browsers and may not handle such trickamajickery ...
As such you should ALSO include an alt/text with a DEFAULT WIDTH and HEIGHT, like this. This is a pure HTML solution.
alt="NO IMAGE" width="800" height="350"
So the other good answer would be slightly modified as follows:
<img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';" alt="NO IMAGE" width="800" height="350">
I had issues with the object tag in Chrome, but I would imagine this would apply to that as well.
You can further style the alt/text to be VERY BIG ...
So my answer is use Javascript with a nice alt/text fallback.
I also found this interesting: How to style an image's alt attribute

React
<img
src="https://example.com/does_not_exist.png"
onError={(e) => {
e.currentTarget.src = "https://example.com/default.png"
}}
/>

The above solution is incomplete, it missed the attribute src.
this.src and this.attribute('src') are NOT the same, the first one contains the full reference to the image, for example http://my.host/error.jpg, but the attribute just keeps the original value, error.jpg
Correct solution
<img src="foo.jpg" onerror="if (this.src != 'error.jpg' && this.attribute('src') != 'error.jpg') this.src = 'error.jpg';" />

3 solutions for this:
Consider following html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img id="imageId">
<script src="setimage.js"></script>
</body>
</html>
Solution one :
reference this block of JS code inside the body tag of your html as
<script src="setimage.js"></script>
and set the src paths, the first is the one if there is an error, the next is the one you hope works first time :)
var img = document.getElementById("imageId")
img.onerror = () => {
img.src= "../error.png";
}
img.src= "../correct.webp.png";
Solution two:
this solution is almost the same, instead you will call the method, again at the end of your body within a script tag, but would supply the paths there.
function setImageWithFallback(mainImgPath, secondaryImgPath) {
var img = document.getElementById("imageId")
img.onerror = () => {
img.src= mainImgPath;
}
img.src= secondaryImgPath;
}
Solution three:
if its just a single image, this would be the simplest :) simply set the onerror at the img tag
<img id="imageId" src="../correct.webp.png"
onerror="if (this.src != '../error.png') this.src = '../error.png';">

If you are using Angular 1.x you can include a directive that will allow you to fallback to any number of images. The fallback attribute supports a single url, multiple urls inside an array, or an angular expression using scope data:
<img ng-src="myFirstImage.png" fallback="'fallback1.png'" />
<img ng-src="myFirstImage.png" fallback="['fallback1.png', 'fallback2.png']" />
<img ng-src="myFirstImage.png" fallback="myData.arrayOfImagesToFallbackTo" />
Add a new fallback directive to your angular app module:
angular.module('app.services', [])
.directive('fallback', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var errorCount = 0;
// Hook the image element error event
angular.element(element).bind('error', function (err) {
var expressionFunc = $parse(attrs.fallback),
expressionResult,
imageUrl;
expressionResult = expressionFunc(scope);
if (typeof expressionResult === 'string') {
// The expression result is a string, use it as a url
imageUrl = expressionResult;
} else if (typeof expressionResult === 'object' && expressionResult instanceof Array) {
// The expression result is an array, grab an item from the array
// and use that as the image url
imageUrl = expressionResult[errorCount];
}
// Increment the error count so we can keep track
// of how many images we have tried
errorCount++;
angular.element(element).attr('src', imageUrl);
});
}
};
}])

Using Jquery you could do something like this:
$(document).ready(function() {
if ($("img").attr("src") != null)
{
if ($("img").attr("src").toString() == "")
{
$("img").attr("src", "images/default.jpg");
}
}
else
{
$("img").attr("src", "images/default.jpg");
}
});

For any image, just use this javascript code:
if (ptImage.naturalWidth == 0)
ptImage.src = '../../../../icons/blank.png';
where ptImage is a <img> tag address obtained by document.getElementById().

Google threw out this page to the "image fallback html" keywords, but because non of the above helped me, and I was looking for a "svg fallback support for IE below 9", I kept on searching and this is what I found:
<img src="base-image.svg" alt="picture" />
<!--[if (lte IE 8)|(!IE)]><image src="fallback-image.png" alt="picture" /><![endif]-->
It might be off-topic, but it resolved my own issue and it might help someone else too.

In addition to Patrick's brilliant answer, for those of you who are searching for a cross-platform angular js solution, here you go:
<object type="image/png" data-ng-attr-data="{{ url || 'data:' }}">
<!-- any html as a fallback -->
</object>
Here's a plunk where I was playing trying to find the right solution: http://plnkr.co/edit/nL6FQ6kMK33NJeW8DVDY?p=preview

If you have created dynamic Web project and have placed the required image in WebContent then you can access the image by using below mentioned code in Spring MVC:
<img src="Refresh.png" alt="Refresh" height="50" width="50">
You can also create folder named img and place the image inside the folder img and place that img folder inside WebContent then you can access the image by using below mentioned code:
<img src="img/Refresh.png" alt="Refresh" height="50" width="50">

I am adding loading="lazy" to img tag. In some cases it works..

here is a simple Jquery that worked for me
$(image).on('error', function(event) {
imgage.attr('src', 'your_image.png');})

Well!!
I found this way convenient , check for the height attribute of image to be 0, then you can overwrite the src attribute with default image:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image
image.setAttribute('src','../icons/<some_image>.png');
//check the height attribute.. if image is available then by default it will
//be 100 else 0
if(image.height == 0){
image.setAttribute('src','../icons/default.png');
}