I have an SVG element on my page. I want to use it as the page's favicon. How do I do this in JavaScript?
Doing this is astoundingly convoluted. You can see my solution in action here: the methodology is described below (getting the HTML elements, by ID or otherwise, is left as an exercise for the reader).
In the HTML
Make sure your SVG element includes the attribute xmlns="http://www.w3.org/2000/svg", as you're going to need to take the source of the element as its own file, and the XMLNS declaration is required for standalone SVG files. (Also note that this means your SVG will need to be self-contained and can't refer to elements in its parent document with something like <use>.)
Optionally, wrap the element in a <div> or <span>, which you may use to get the content of the <svg> element using .innerHTML. (Neither the innerHTML nor the outerHTML attributes are present on SVG elements in the current HTML standard.)
Include a <link rel="icon"> in your page's <head>.
In JavaScript
Get the source of the SVG element you want to set as your favicon by getting the innerHTML attribute of the HTML element you've wrapped it in, or by calling new XMLSerializer().serializeToString() on the SVG element.
Create a DataURL for this element as a document by prepending the string "data:image/svg+xml," to the source. (If most browsers supported SVGs for favicons, we'd be done here, but since, at time of writing, they don't, we must go deeper.)
Create an <img> element that you'll be routing the image through, add an event listener to it for the load event that will draw the image once control returns to the event loop (as spec-compliant browsers won't let you read the image synchronously - see this crbug), and set the DataURL of your SVG source as its src attribute. (The steps between this and step 8 can happen either in sync now, or as part of the listener callback; they just need to happen before you draw the image.)
Decide what resolution you want to render your favicon to - My examples will use 64x64, for compatibility with high-DPI (Retina and Super Retina) displays.
Create a <canvas> element (heretofore referred to as canvasElement) and set its dimensions (by setting canvasElement.width = 64 and canvasElement.height = 64).
Create a drawing context for the canvas using canvasElement.getContext('2d') (heretofore referred to as ctx).
If you're re-using a canvas you've created beforehand, set ctx.globalCompositeOperation = "copy", or clear it with ctx.clearRect(0, 0, 64, 64).
Somewhere in the execution sequence following from the load listener you added to the <img> element you created in step 3, draw the image onto the canvas using ctx.drawImage(svgImg, 0, 0, 64, 64) (where svgImg is the <img> element you set the src to the SVG DataURL).
Create a PNG DataURL from the canvas using canvasElement.toDataURL(), and set that to the href attribute of the <link rel="icon"> element in your HTML.
I know its already answered but It too much work for such a simple task just store your svg in a svg file and use it as favicon in Head Tag.
<link rel="shortcut icon" href="favicon.svg" type="image/x-icon">
I have tried and this worked for me:
<link rel="shortcut icon" href="favicon.svg" type="image/svg">
Change the type="image/x-icon" to type="image/svg".
Related
I have an SVG file containing a number of xlinks that navigate to a different page. For example:
<a xlink:href="us/ak">...</a>
The SVG is a US map, and I'd be happy to provide it, but it's too big to include here.
When I try to use this SVG in an AMP page, the xlinks don't work. I see in the AMP spec that xlinks in an SVG are required to have a target URI starting with "#", so I think that's why my xlink isn't working. It behaves the same whether I use an amp-img or img tag.
It works fine if I put it in an img tag on a non-AMP page.
Is there a way to get my links to go to a new page, and not just to a #-link on the same page?
The color change on hover also stops working when I put the SVG on an AMP page, but I'm tackling one problem at a time.
If you just want to link to another page, <a href="..."> should work...
I have the following animation:
https://svgur.com/i/6XH.svg
If you click on the link, you will see that it starts playing once you hover it.
However, when I load the svg on a page using the image tag, as done below, the hover event doesn't seem to reach the svg image.
Is it possible to do this somehow? It is not an option to paste the svg directly in the html page, because the software I use don't allow for that.
Images by design do not expose a DOM and their content cannot receive mouse events; the target of the hover event is the <img> element itself. You can use an <object> or an <iframe> tag instead. The SVG is then inserted as a subdocument that users can interact with.
<object data="https://svgur.com/i/6XH.svg" width="322px" height="65px"></object>
I'm trying to show a svg icon on html page with pug syntax, but doesn't work
This is the code
span.icon
svg(width="24px", height="24px")
use(xlink:href="../../../images/svg/glass.svg")
The <use> element cannot link to complete files, only to named fragments. There is a proposal to change this in the future, but for now, the root <svg> element in file glass.svg needs to have an id, lets say id="glassRoot". Then you can do
span.icon
svg(width="24px", height="24px")
use(xlink:href="../../../images/svg/glass.svg#glassRoot")
Add id="glassRoot" -> (#glassRoot) after glass.svg.
I'm trying to use CSS transisions with SVG <use> element.
The problem is that the transition works with the original element but not inside the element on adding/removing class through classList.
However when I disable the transform property in the browser tools, it works.
Can someone help with this?
The small element is the source element which works, The bigger one is using <use>
https://codepen.io/karanS/pen/GqVLGv
I defined CSS transition rules in my svg. It's something like:
#mark #bg {
transition: fill 200ms;
fill: #245575;
}
#mark:hover #bg {
fill: #ff5c26;
}
When I drag it into browser's blank page and test it, the transition works fine. But if I embed the svg into my website using <img src="images/mark.svg" alt="">, the transition doesn't work.
Did I miss something?
Images either via <img> tags of via the CSS background-image image property cannot be interactive and have other restrictions in order to maintain user's privacy and security.
If you ask yourself "could I do this if the image was a .png or a .gif?" then you'll be on the right lines. Browsers have deliberately chosen to keep to the same mental model for SVG files so that the capability of images is easy to understand.
If you want transitions to work you'll need to use an <object> or <iframe> tag or embed the SVG inline in the html document.