Windows 8.1, WinJS SVG file and CSS background support?
Does Windows 8.1 WinJS support displaying an SVG as a CSS background or linking to an SVG file? I can get them to output by pasting the SVG code onto the page directly but this is a nightmare to maintain if its used multiple times?
.svg {
background: url(images/interface/icon_avatar.svg) no-repeat center center;
}
or
<img src="images/interface/icon_avatar.svg" />
I've tried both of these methods without success.
This however does work but as I said isn't great for obvious reasons:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<path fill="none" d="M96.605 78.479L76.903 58.591c2.564-5.357 3.996-11.372 3.996-17.726c0-22.549-18.104-40.826-40.44-40.826 S0.019 18.3 0 40.865c0 22.6 18.1 40.8 40.4 40.832c7.837 0 15.15-2.263 21.343-6.15l18.853 19 c4.405 4.4 11.5 4.4 15.9 0C101.007 90.1 101 82.9 96.6 78.479z M40.459 74.3 c-18.273 0-33.086-14.953-33.086-33.407c0-18.445 14.814-33.407 33.086-33.407c18.274 0 33.1 15 33.1 33.4 C73.548 59.3 58.7 74.3 40.5 74.272z M51.937 32.202l-1.787 1.462l0.305-5.189c-0.333-0.835-0.955-2.327-1.439-3.302 c-0.566 0.238-1.499 0.529-2.695 0.529c-2.271 0-5.626-1.028-9.111-5.718c-1.852 0.96-5.54 3.673-6.43 10.278l-0.566 4.2 l-1.327-1.813c-0.073 2.9 0.3 6.2 1.3 10.268l7.595 4.706c0 0 2.8 2.6 6.9 0c0 0 4.813-3.565 6.167-4.856 C50.901 42.8 51.2 43.6 51.9 32.202z M28.417 29.104l0.672 0.924c1.359-10.063 8.727-12.158 8.727-12.158 c5.791 8.7 10.9 5.5 10.9 5.541c1.278-1.217 1.6 0.5 1.6 0.532c0.751 1.4 1.9 4.2 1.9 4.2 c-0.033 0.581-0.065 1.138-0.097 1.673c1.479-1.211 1.225-5.471 1.225-5.471c0-4.477-3.008-7.969-3.008-7.969 c-3.233-4.104-9.208-3.874-9.208-3.874c-6.424 0-9.592 3.189-9.592 3.189c-4.361 4.404-3.535 10.174-3.535 10.2 C27.815 28.9 28.4 29.1 28.4 29.104z M45.69 49.057l-0.058 0.04c-1.493 0.93-3.017 1.4-4.528 1.4 c-2.278 0-3.798-1.07-4.287-1.471l-3.79-2.345c-0.135 0.642-0.318 1.284-0.563 1.884l0.162 0.3 c1.875 3 5 4.8 8.4 4.825c3.377 0 6.514-1.807 8.388-4.828l0.308-0.498c-0.119-0.56-0.248-1.229-0.383-2.033 c-1.693 1.321-3.462 2.636-3.583 2.724L45.69 49.057z M50.846 49.736c-2.103 3.394-5.719 5.636-9.833 5.6 c-4.114 0-7.731-2.241-9.833-5.632c-3.319 0.795-10.095 2.406-11.111 2.522c0 0-3.535-0.229-5.489 4.324l-0.377 1.2 c5.533 8.7 15.2 14.6 26.3 14.565c11.211 0 21.01-5.997 26.502-14.968c-0.585-1.495-2.231-4.807-5.532-5.333L50.846 49.7 z"/>
</g>
</svg>
Many thanks
Chris
Windows 8.1 WinJS definitely supports SVG in the methods you want, assuming all of the setup and files are correctly defined.
Make sure that the standalone SVG files have a namespace defined:
xmlns="http://www.w3.org/2000/svg" version="1.1"
as shown in the files below. If this is not done, they won't load and display correctly (yet the same SVG likely will show correctly when embedded directly on the page).
Here's a simple example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SVG Test</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<style>
body {
background: url(demo.svg) repeat;
}
</style>
</head>
<body>
<img src="demo2.svg" width="800" height="800" />
</body>
</html>
demo.svg:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="30px" height="30px">
<rect x="0" y="0" width="100%" height="100%"
fill="black" stroke="black"/>
<circle cx="15" cy="15" r="15"
style="stroke: blue; fill: black;"/>
</svg>
demo2.svg:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="100%" height="100%" viewBox="0 0 400 400">
<circle cx="200" cy="200" r="200"
style="stroke: black; fill: blue;"/>
</svg>
In the simulator:
The two demo*.svg files are marked as Package Action: Content:
