Printing with tiled SVG background images

Question

Printing with tiled SVG background images

Whenever I use an SVG tile as the background for my website, it appears perfectly fine when viewed in a browser. However, when I try to print the page, it scales in a strange and nonuniform way. Is there a solution to prevent this distortion when printing from a browser?

You can see an example of this issue here. The background looks like this:

https://i.stack.imgur.com/I066r.png

But when printed, it ends up looking like this:

https://i.stack.imgur.com/SQdYE.png

<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>
<rect width='10' height='10' fill='#fff'/>
<rect width='5' height='5' fill='#ccc'/>
</svg>

#test {
  height: 500px;
  width:500px;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+CjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2ZmZiI+PC9yZWN0Pgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjY2NjIj48L3JlY3Q+Cjwvc3ZnPg==");
}

<div id="test">
</div>

The above SVG code is being referenced by the CSS of the webpage.

css svg background-image

Answer 1

Answer №1

You can include svg within the img tag and dynamically add it using jQuery as shown in the snippet below. This method should work effectively for printing on both Chrome and FF browsers.

$(document).ready(function(){
var squareBox = 3000; //Adjust the number of square boxes here
for (var i = 1; i <= squareBox; i++) {
$('#test').append('<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+CjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2ZmZiI+PC9yZWN0Pgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjY2NjIj48L3JlY3Q+Cjwvc3ZnPg==">');
}
})

#test{
height: 500px;
width: 500px;
overflow: hidden;
}
#test img{
width: 10px;
height: 10px;
display: block;
float: left;
margin-top: 0px;
}
@media print and (color){
*{
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
button{display: none;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" onclick="window.print();">Print</button>

<div id="test"></div>

Answer 2

You can include svg within the img tag and dynamically add it using jQuery as shown in the snippet below. This method should work effectively for printing on both Chrome and FF browsers.

$(document).ready(function(){
var squareBox = 3000; //Adjust the number of square boxes here
for (var i = 1; i <= squareBox; i++) {
$('#test').append('<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+CjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2ZmZiI+PC9yZWN0Pgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjY2NjIj48L3JlY3Q+Cjwvc3ZnPg==">');
}
})

#test{
height: 500px;
width: 500px;
overflow: hidden;
}
#test img{
width: 10px;
height: 10px;
display: block;
float: left;
margin-top: 0px;
}
@media print and (color){
*{
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
button{display: none;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" onclick="window.print();">Print</button>

<div id="test"></div>

Printing with tiled SVG background images

Answer №1

Similar questions

Ways to remove the highlighting from a selected list item using CSS/Javascript

Learning how to track mouse wheel scrolling using jQuery

Having trouble getting Tinymce to appear on the screen

Tips for showing text beyond the confines of a <div></div> container

The problem with clearing floats in IE7 (as well as 6)

Troubleshooting issue with CSS SVG Clip path functionality - facing technical difficulties

Enhancing ag-grid with alternating row group colors following row span

Pointer-enhanced Material UI Popup

What is the best way to align three images horizontally using bootstrap?

A guide on effectively selecting an element with the '@font-face' tag

Introducing a new feature that allows automatic line breaks when using the detail

What's causing ng-show to malfunction in IE11 on AngularJS?

ways to halt a noise once an animation is complete

CSS Switchable Style Feature

Make a div with absolute positioning overflow outside of a div with relative positioning that is scrollable

JavaScript combined with a dynamic menu, a customized current link style using CSS, and a site built on PHP

The appearance of online and local websites varies on a single screen and browser

The modal box should adjust its height to perfectly accommodate the content within

Position the float input to the right on the same line as an element

Navbar optimization by eliminating unnecessary whitespace at the end