@media print problem with lack of SVG

Question

I want to make my website printable, I have problems with SVG in @media print, the problem is that SVG is not displayed when printing. A.

html5

<div class="svg-container"> <object type="image/svg+xml" data="{{ site.theme.link }}/asset/svg/{{ station.menu_order }}.svg" width="100%" height="100%" class="svg-content"></object> </div> 

CSS3

 .svg-container { display: inline-block; position: relative; width: 15%; padding-bottom: 4%; vertical-align: middle; overflow: hidden; } .svg-content { display: inline-block; position: absolute; top: 1.25em; left: 0; } 

Can anybody help me?

Answer 1

the answer was given by @SaraSoueidan just need to determine the width and depth of filling at 100%

 .svg-container { display: inline-block; position: relative; width: 100%; padding-bottom: 100%; vertical-align: middle; overflow: hidden; } .svg-content { display: inline-block; position: absolute; top: 0; left: 0; }