Menu
I want to render a FontAwesome icon as an SVG dynamically provide it as an image source using Javascript. I want my output to be something like this
PS - I will draw the circle myself. Just need a way to render the icon.
So far, I have tried this approach:
function addSVG() {
var ele = document.getElementById("svg");
var svg = `<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
<text x="4" y="15" style="font-family: FontAwesome" fill="red"></text>
</svg>`
var output = 'data:image/svg+xml;base64,' + btoa(svg)
ele.src = output;
}
addSVG()<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
What it should look like:
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<text x="4" y="15" style="font-family: FontAwesome" fill="red"></text>
</svg>
What it looks like:
<img id="svg">
</body>As you can see, without the Javascript (just using SVG in HTML) it works fine.
556
Why do you need it in img tag? SVG is an image! You do not need it to put in something else.
May be I do not know something from you, but I think this is just a bad idea from you.
My suggestion: put SVG in HTML with font-awesome icons directly:
Your benefit from this: all modern browsers support it without any limits like in img tags or as background image.
var divSvg = document.getElementById('svg'),
pics =
{
user: {col: '00a', icon: 'f007'},
home: {col: '08c', icon: 'f015'},
folder: {col: '88f', icon: 'f07c'},
gear: {col: '5a0', icon: 'f013'},
flag: {col: '05a', icon: 'f024'},
leaf: {col: '080', icon: 'f06c'}
},
svg =
'<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">\
<text x="4" y="24" fill="COLOR" style="font:24px FontAwesome;cursor:pointer">PIC</text>\
</svg>';
for(var title in pics)
{
var newSVG = svg.replace('PIC', '&#x'+pics[title].icon+';');
//we put it in "B" tag to have a title because IE
//does not support title attribute and title tag in SVG
divSvg.innerHTML += '<b title="' + title + '">' +
newSVG.replace('COLOR', '#'+pics[title].col) + '</b>';
}
divSvg.onclick = function(e)
{
if(e.target.tagName == 'text')
{
document.getElementById('output').innerHTML = 'Was clicked on ' +
// we take title from "B" tag:
e.target.parentNode.parentNode.title;
/* if you need you can use:
switch(e.target.parentNode.parentNode.title)
{
case 'user': alert('Here some procedure with user');
case ... YOUR CODE
and so on... YOUR CODE
}*/
}
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<div id="svg"></div><br>
<div id="output">Please click on any icon.</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
