I am trying to use an SVG image as a css background image. Corresponding SVG files will eventually use several large JPEG images (embedded or linked) as a mask for other SVG elements. I am doing this instead of using PNG to save file size. (my compressed shades of gray are very small)
Currently, I can only get base64-encoded inline images to display them correctly, and Safari just doesn't work (except using inline ones to show SVG directly)
Below is my test code:
(All images from archive.org and links should be permanent - I missed base64 encoded data)
index.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml"> <style type="text/css"> body { font-family: Arial, sans; } .box1, .box2, .box3 { width: 400px; height: 100px; background-size: 192px 192px; margin: 10px 10px 0px 0px; padding: 10px; } .box1 { background: url("test1.svg"); } .box2 { background: url("test2.svg"); } .box3 { background: url("test3.svg"); } .sml { width: 100px; height: 100px; margin: 10px 10px 10px 0px; } </style> </head> <body> <div class="box1">Test 1</div> <div class="box2">Test 2</div> <div class="box3">Test 3</div> <img class="sml" src="test1.svg" type="image/svg+xml"> <img class="sml" src="test2.svg" type="image/svg+xml"> <img class="sml" src="test3.svg" type="image/svg+xml"> <embed class="sml" src="test1.svg" type="image/svg+xml"> <embed class="sml" src="test2.svg" type="image/svg+xml"> <embed class="sml" src="test3.svg" type="image/svg+xml"> </body> </html>
working svg
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns:cc="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="192px" height="192px" viewBox="0 0 192 192"> <style type="text/css" id="style_css_sheet"> .orange { fill: #f9690e; } .yellow { fill: #f1d40f; } </style> <defs> <filter id="invert"> <feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"/> </filter> <rect id="box-bg" x="0" y="0" width="192px" height="192px" class="yellow" /> <rect id="box-fg" x="0" y="0" width="192px" height="192px" class="orange" /> <mask id="fg-mask" x="0" y="0" width="192px" height="192px" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"> <image id="mask-img" width="192px" height="192px" filter="url(#invert)" xlink:href="data:image/jpg;base64, [[ DATA ]]"></image> </mask> </defs> <use xlink:href="#box-bg" overflow="visible"></use> <use xlink:href="#box-fg" mask="url(#fg-mask)" overflow="visible"></use> </svg>
broken?? xlink image option
<mask id="fg-mask" x="0" y="0" width="192px" height="192px" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"> <image id="mask-img" width="192px" height="192px" filter="url(#invert)" xlink:href="http://bit.ly/1u61zrE"></image> </mask>
So ... Safari loves only embed tags, chrome and firefox can do the background, but only when the image is embedded as data. Any ideas on how to get Safari to work with at least embedded data would be great. If there is a way to make them work, even better ...
Thanks.
source share