CODEWITHSUNDEEP
javascripthtmlgoogle-chromesvgprinting
Scott Severance
Scott Severance

Reputation: 953

Chrome usually not displaying inline SVG images when printing

I have a web page which contains many instances of this code in the HTML:

<span class="change-slide">@</span>

Then, the page uses Javascript to replace the @ with an SVG image:

var changes = document.getElementsByClassName('change-slide');
for (var i=0; i<changes.length; i++) {
  changes[i].innerHTML = '<svg version="1.1" viewBox="0 0 16 16" height="16" width="16"><g transform="translate(0,-1036.3622)" id="layer1"><rect y="1036.8221" x="0.45993891" height="8.080122" width="15.080122" id="screen" style="fill:#ffffff;stroke:#000000;stroke-width:0.91987783;" /><g id="arrow-group"><path id="arrow" style="stroke-width:0" d="m 12.812155,1049.1511 -2.523251,2.5233 -0.7704589,-0.7705 1.4959739,-1.496 -2.3691601,0 0,-1.0915 2.3691601,0 -1.4959739,-1.4959 0.7704589,-0.7705 2.523251,2.5233 0,0.5778 z m -6.8956031,-0.8347 1.6372242,0 0,1.0915 -1.6372242,0 0,-1.0915 z m -1.0914828,0 0,1.0915 -1.6372242,0 0,-1.0915 1.6372242,0 z" /></g></g></svg>';
}

Here's the relevant CSS:

.change-slide{font-weight:bold}
.change-slide svg{width:20px;height:20px;display:inline-block;vertical-align:middle}
@media screen{
  .change-slide svg path{fill:#900;stroke:#900}
  .change-slide svg rect{fill:#e2e2f8 !important;stroke:#4c0099 !important}
}

I estimate that around 50 or so replacements are made on this particular page (a speaking script with indications of when to change slides). When printing the page in both Firefox and Edge, the SVG icons show up as expected. However, in Chrome, most icons aren't printed (and don't show up in print preview), despite the screen view being correct. Here's a screenshot, with the icon and a couple of missing icons highlighted: Example of the missing icons

Any ideas what might be wrong?

Upvotes: 1

Views: 2567

Answers (1)

Waruyama
Waruyama

Reputation: 3523

One possibility is that Chrome has a problem with resolving the transform in your SVG correctly. I applied the transform to the descendant elements, so it looks the same SVG but does not contain a tranform:

<svg version="1.1" viewBox="0 0 16 16" height="16" width="16">
  <g id="layer1">
    <rect y="0" x="0.45993891" height="8.080122" width="15.080122" id="screen" style="fill:#ffffff;stroke:#000000;stroke-width:0.91987783;" /><g id="arrow-group">
    <path id="arrow" style="stroke-width:0" d="m 12.812155,12.7889 -2.523251,2.5233 -0.7704589,-0.7705 1.4959739,-1.496 -2.3691601,0 0,-1.0915 2.3691601,0 -1.4959739,-1.4959 0.7704589,-0.7705 2.523251,2.5233 0,0.5778 z m -6.8956031,-0.8347 1.6372242,0 0,1.0915 -1.6372242,0 0,-1.0915 z m -1.0914828,0 0,1.0915 -1.6372242,0 0,-1.0915 1.6372242,0 z" />
    </g>
  </g>  
</svg>

Maybe replacing your svg with this helps.

Edit: Here is a modified version that is smaller and may solve the new issue on Firefox:

<svg version="1.1" viewBox="0 0 16 16" height="16" width="16">
  <g id="layer1">
    <rect y="0" x="0.5" height="8" width="15" id="screen" style="fill:#ffffff;stroke:#000000;stroke-width:1;" />    
    <g id="arrow-group">
    <path id="arrow" style="stroke-width:0" d="m 12.812155,12.7889 -2.523251,2.5233 -0.7704589,-0.7705 1.4959739,-1.496 -2.3691601,0 0,-1.0915 2.3691601,0 -1.4959739,-1.4959 0.7704589,-0.7705 2.523251,2.5233 0,0.5778 z m -6.8956031,-0.8347 1.6372242,0 0,1.0915 -1.6372242,0 0,-1.0915 z m -1.0914828,0 0,1.0915 -1.6372242,0 0,-1.0915 1.6372242,0 z" />
    </g>
  </g>  
</svg>

Upvotes: 1

Related Questions