Solution 1 :

Well yes, you can change the image’s width using CSS, just like any HTML image:

Assuming your image has a class of svg:

<img src="check-box.svg" class="svg">

Your CSS can be something like:

.svg {
    width: 0.9em;
    height: auto;

Problem :


<a id="showAll"><img srcset="check-box.svg" width="10" height="10"></a>
<a id="showName"><img srcset="empty-box.svg" width="10" height="10"></a>


document.querySelector('#showAll').onclick = function () {
document.querySelector('#showName').innerHTML = '<img srcset="check-box.svg" width="10" height="10">';

So when clicking the ShowAll element, the ShowName element will have the same icon as ShowAll

Code works but what I want is to:

1) simplify the <img srcset="check-box.svg" width="10" height="10"> inside the js file. Can I do it in css instead of having this long string in JS?

2) if css is ok, the ideal size of that icon should be “0.9em”, not “10” – javascript doesnt seem to read 0.9em

I’m a JS noob, sorry if this is trivial 🙁


Comment posted by

Questions related to working code, with requests for refactoring advice, should be made on


Leave a Reply

Your email address will not be published. Required fields are marked *