How do I get SVG added to ::after pseudo element as a content and scale it?

On my page, I like to add an SVG to the end of a link if it is not local to my page to let the user know that this is an external link. I have been using a method what puts the SVG as the background-image (#1 in code snippet). That works fine but when the page is printed, those SVG items will only show up if background graphics is selected, which is something that the average person will not do.

I have found a different technique that puts the SVG into the content and will print the SVG no matter what the print settings are. However, scaling the SVG is a problem (#2 in code snippet). As my SVG is 120×120 I want to scale it to 12×12 which means that using zoom : 10% does the trick. Zoom is non-standard, according to MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/zoom), and it works in Chrome but does not work in Firefox. I’ve tried transform: scale(0.1) but that does not work at all.

Any ideas how to scale this SVG in CSS if it is a content?

Note that the SVG file in question is hand coded, based on the one from Wikipedia (https://en.wikipedia.org/wiki/File:External.svg).

<?xml version="1.0" encoding="UTF-8"?>
<!-- external link is a 10x10 drawing centered inside a 12x12 container -->
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
<path fill-opacity="0" stroke="#a80000" stroke-width="10" stroke-linejoin="round" d="m53,45H15v60h60V67M55,15v10l10,10-30,30 20,20 30-30 10,10h10V15z"/>
</svg>

a.bgi[href^="http"]::after
{
    background-image    : url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3e%3cpath fill-opacity='0' stroke='%23a80000' stroke-width='10' stroke-linejoin='round' d='m53 45H15v60h60V67M55 15v10l10 10-30 30 20 20 30-30 10 10h10V15z'/%3e%3c/svg%3e");
    background-repeat   : no-repeat;
    background-position : right center;
    background-size     : 12px 12px;
    content             : "";
    padding-left        : 13px;
}

a.content[href^="http"]::after
{
    content     : url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3e%3cpath fill-opacity='0' stroke='%23a80000' stroke-width='10' stroke-linejoin='round' d='m53 45H15v60h60V67M55 15v10l10 10-30 30 20 20 30-30 10 10h10V15z'/%3e%3c/svg%3e");
    zoom        : 10%;
    margin-left : 10px; /* this is scaled by the zoom factor */
}

li
{
    padding-top : 1em;
}
<ol>
<li>Here is a link using the SVG background-image method:
<a href="https://google.com" class="bgi">Google.com</a></li>

<li>Here is a link using SVG content/zoom method:
<a href="https://google.com" class="content">Google.com</a></li>
</ol>

Thanks,

Mike

Answer

Replace the SVG’s width/height with a viewBox and then adjust the size of your ::after element:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
    ...

a.content[href^="http"]::after {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3e%3cpath fill-opacity='0' stroke='%23a80000' stroke-width='10' stroke-linejoin='round' d='m53 45H15v60h60V67M55 15v10l10 10-30 30 20 20 30-30 10 10h10V15z'/%3e%3c/svg%3e");

  /* Adjustable size: */
  display: inline-block;
  width: 1em;
  height: auto;
}
<ol>
  <li>
    Here is a link:
    <a href="https://google.com" class="content">Google.com</a>
  </li>
</ol>