svg groups and fill inheritance - svg

My goal is to have the first group of 3 squares be blue and the next group of 3 squares be red. To minimize code, I want to take advantage of grouping in SVG. All the rectangles remain blue. I have tried inline styling on the second group element and on the use element, but that doesn't solve the problem. Thank you for your assistance.. Here's the code:
<svg width="1000" height="800"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.blue {fill:blue;}
.red {fill:red;}
</style>
<g id="g1" class="blue">
<rect x="0" y="0" width="100" height="100" />
<rect x="0" y="105" width="100" height="100" />
<rect x="0" y="210" width="100" height="100" />
</g>
<g class="red">
<use xlink:href="#g1" transform="translate(0,315)" />
</g>
Here are changes from above that now have it working:
<g class="blue">
<g id="g1">
<rect x="0" y="0" width="100" height="100" />
<rect x="0" y="105" width="100" height="100" />
<rect x="0" y="210" width="100" height="100" />
</g>
</g>
<g class="red" transform="translate(0,315)">
<use xlink:href="#g1" />
<!-- <g id="g1">
<rect x="0" y="0" width="100" height="100" />
<rect x="0" y="105" width="100" height="100" />
<rect x="0" y="210" width="100" height="100" />
</g> -->
</g>
... I commented out some of the old svg as well.
Here's the solution in a clearer form (some of the commented code above, actually came from further experimenting).
<svg width="1000" height="800"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.blue {fill:blue;}
.red {fill:red;}
</style>
<g class="blue">
<g id="g1">
<rect x="0" y="0" width="100" height="100" />
<rect x="0" y="105" width="100" height="100" />
<rect x="0" y="210" width="100" height="100" />
</g>
</g>
<g class="red" transform="translate(0,315)">
<use xlink:href="#g1" />
</g>
Looks like styling needs to be done at a level above a group in my case and that the as Robert pointed out will retrieve the previous group as written.

Related

Is it possible to center align <rect>'s inside a <g> for SVG?

Is it possible to vertically center align all the rects inside a tag without having to adjust the y attributes on <rect>? (see snippet for example)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
<g fill="black">
<rect x="10" y="1" width="6" height="5" />
<rect x="20" y="1" width="6" height="10" />
<rect x="30" y="1" width="6" height="20" />
<rect x="40" y="1" width="6" height="5" />
<rect x="50" y="1" width="6" height="15" />
</g>
</svg>
<h3>desired result</h3>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
<g fill="black">
<rect x="10" y="8" width="6" height="5" />
<rect x="20" y="6" width="6" height="10" />
<rect x="30" y="1" width="6" height="20" />
<rect x="40" y="8" width="6" height="5" />
<rect x="50" y="4" width="6" height="15" />
</g>
</svg>
No, it's not possible to center align <rect> elements.
But it is possible to center-align <line> elements and give them a stroke-width (note the viewBox is vertically centered around 0):
<svg viewBox="0 -19 225 38" width="100%" height="100%">
<g stroke="black">
<line x1="10" x2="16" stroke-width="5" />
<line x1="20" x2="26" stroke-width="10" />
<line x1="30" x2="36" stroke-width="20" />
<line x1="40" x2="46" stroke-width="5" />
<line x1="50" x2="56" stroke-width="15" />
</g>
</svg>
You could also achieve vertically centered <rect> elements by setting a transform: translate(0, -50%) css rule.
This approach also requires a transform-box: fill-box; (or content-box) property.
All <rect>elements get a y="50%" attribute to start at the vertical center of the svg viewBox.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" width="100%" height="100%" style="border:1px solid #ccc">
<style>
rect {
transform: translate(0, -50%);
transform-origin: center;
transform-box: fill-box;
}
</style>
<g fill="black" >
<rect x="10" y="50%" width="6" height="5" />
<rect x="20" y="50%" width="6" height="10" />
<rect x="30" y="50%" width="6" height="20" />
<rect x="40" y="50%" width="6" height="5" />
<rect x="50" y="50%" width="6" height="15" />
</g>
</svg>
Browser support for transform-box is decent. (See caniuse).
However, if you need legacy browser (e.g. ie11) support, #ccprog's answer is a more robust solution.

SVG - Create outer stroke of different merged paths

I have an SVG file which represents a map using different paths.
https://imgur.com/a/YyTyz
These paths represents different areas; I need to make bold the outer stroke that these paths create, as represented in this picture (note that there are 2 SVGs in a single file).
https://imgur.com/a/0fepe
Is it possible to achieve thisin a simple way?
Thanks in advice
Assuming that each of the areas of the map are their own path - and that you don't already have a path around the outside, then the simplest solution is to:
duplicate the map
put it at the back
give the map paths a thicker stroke
For example, let's start with the following simplified example.
<svg width="400" height="200">
<rect x="50" y="50" width="200" height="50" fill="linen" stroke="black"/>
<rect x="250" y="50" width="100" height="50" fill="linen" stroke="black"/>
<rect x="50" y="100" width="150" height="50" fill="linen" stroke="black"/>
<rect x="200" y="100" width="150" height="50" fill="linen" stroke="black"/>
</svg>
If we take a copy of those elements and give it a thicker stroke, we get:
<svg width="400" height="200">
<g fill="linen" stroke="black" stroke-width="5">
<rect x="50" y="50" width="200" height="50"/>
<rect x="250" y="50" width="100" height="50"/>
<rect x="50" y="100" width="150" height="50"/>
<rect x="200" y="100" width="150" height="50"/>
</g>
<rect x="50" y="50" width="200" height="50" fill="linen" stroke="black"/>
<rect x="250" y="50" width="100" height="50" fill="linen" stroke="black"/>
<rect x="50" y="100" width="150" height="50" fill="linen" stroke="black"/>
<rect x="200" y="100" width="150" height="50" fill="linen" stroke="black"/>
</svg>
To keep the file as small as possible, we can reuse the paths for both copies of the map:
<svg width="400" height="200">
<defs>
<g id="map">
<rect x="50" y="50" width="200" height="50"/>
<rect x="250" y="50" width="100" height="50"/>
<rect x="50" y="100" width="150" height="50"/>
<rect x="200" y="100" width="150" height="50"/>
</g>
</defs>
<use xlink:href="#map" fill="linen" stroke="black" stroke-width="5"/>
<use xlink:href="#map" fill="linen" stroke="black"/>
</svg>
It's not necessarily the most elegant solution, since all the map elements get drawn twice. But it is the simplest solution.

Alpha Transparent Gradient in Inline SVG Defs Element

I have this CODEPEN and here are my issues:
I am not understanding why the gradient I applied and referenced as my mask fill like so, doesn't render as it should. It should go from fully opaque to fully transparent. For the gradient I am using: http://angrytools.com/gradient/?0_800080,100_450045&0_0,100_100&l_180:
<mask id="myMask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)" />
</mask>
In addition I don't understand why if I remove the fill="blue" attribute from my use element like so:
<use xlink:href="#myText" mask="url(#myMask)" />
The text appears black as if no gradient was applied. The gradient I defined is purple..
Thanks!
if you just want to apply your gradient to your text, there is no need to use masks, because gradients support the stop-opacity property.
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
<defs>
<linearGradient id="lgrad" x1="100%" y1="50%" x2="0%" y2="50%">
<stop offset="0%" style="stop-color:rgb(128,0,128);stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(69,0,69);stop-opacity:1" />
</linearGradient>
<text x="100" y="120" text-anchor="middle" id="myText" font-size="50">Hello</text>
</defs>
<use xlink:href="#myText" fill="url(#lgrad)" />
</svg>
you only need masks if you want to seperate the opacity from your fills:
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
<defs>
<linearGradient id="lgrad" x1="100%" y1="50%" x2="0%" y2="50%">
<stop offset="0" stop-color="black" />
<stop offset="1" stop-color="white" />
</linearGradient>
<mask id="myMask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="url(#lgrad)" />
</mask>
<text x="100" y="120" text-anchor="middle" id="myText" font-size="50">Hello</text>
</defs>
<g mask="url(#myMask)">
<use xlink:href=" #myText" transform="translate(0,-50) " fill="red " />
<use xlink:href="#myText" transform="translate(0,0)" fill="green" />
<use xlink:href="#myText" transform="translate(0,50)" fill="blue" />
</g>
</svg>
masks turn colors into opacity information. going from black(totally transparent) to white (totally opaque)
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
<defs>
<mask id="myMask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="50%" height="50%" fill="white" />
<rect x="50%" y="0" width="50%" height="50%" fill="#333" />
<rect x="0%" y="50%" width="50%" height="50%" fill="#aaa" />
<rect x="50%" y="50%" width="50%" height="50%" fill="white" />
<circle cx="50%" cy="50%" r="15%" fill="black" />
</mask>
<text x="100" y="120" text-anchor="middle" id="myText" font-size="50">Hello</text>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="beige" />
<g mask="url(#myMask)">
<use xlink:href="#myText" transform="translate(0,-50)" fill="red" />
<use xlink:href="#myText" transform="translate(0,0)" fill="green" />
<use xlink:href="#myText" transform="translate(0,50)" fill="blue" />
</g>
</svg>

Abutted rect elements in SVG leave a tiny gap

I am trying to create a color palette using SVG. For this, I about many rect elements and just change the style for each one.
The issue is that, sometimes, there is tiny sliver of white between the elements, as in this image:
This snapshot was taken in Chrome on OSX. Safari looks similar.
In my code viewBox is not constant and can vary depending on the number of rectangles. Additionally, width and height can also vary depending on chosen resolution. In other words, I can't play with these to make this one look right.
I tried creating each rect a bit wider than necessary, but the effect was the same. In teh above picture the top row has a width of 100.1, while the bottom has 100. Making the width 101 worked, but I can't use this since in some cases the expected width of a rect could be single digits, so an extra 1 to the width is significant overlap.
I tried adding a stroke, but that didn't work as the required width to make this work depends on viewBox and rect sizes.
Have you seen this problem?
Here is my code:
<html>
<body>
<svg width="1000" height="1000" viewBox="0 0 5000 5000">
<g>
<rect x="0" y="0" width="100.1" height="100" style="fill:rgb(0,0,255)"></rect>
<rect x="100" y="0" width="100.1" height="100" style="fill:rgb(0,0,250)"></rect>
<rect x="200" y="0" width="100.1" height="100" style="fill:rgb(0,0,245)"></rect>
<rect x="300" y="0" width="100.1" height="100" style="fill:rgb(0,0,240)"></rect>
<rect x="400" y="0" width="100.1" height="100" style="fill:rgb(0,0,235)"></rect>
<rect x="500" y="0" width="100.1" height="100" style="fill:rgb(0,0,230)"></rect>
<rect x="600" y="0" width="100.1" height="100" style="fill:rgb(0,0,225)"></rect>
<rect x="700" y="0" width="100.1" height="100" style="fill:rgb(0,0,220)"></rect>
<rect x="800" y="0" width="100.1" height="100" style="fill:rgb(0,0,215)"></rect>
<rect x="900" y="0" width="100.1" height="100" style="fill:rgb(0,0,210)"></rect>
<rect x="1000" y="0" width="100.1", height="100" style="fill:rgb(0,0,205)"></rect>
<rect x="1100" y="0" width="100.1" height="100" style="fill:rgb(0,0,200)"></rect>
<rect x="1200" y="0" width="100.1" height="100" style="fill:rgb(0,0,195)"></rect>
<rect x="1300" y="0" width="100.1" height="100" style="fill:rgb(0,0,190)"></rect>
<rect x="1400" y="0" width="100.1" height="100" style="fill:rgb(0,0,185)"></rect>
<rect x="0" y="100" width="100" height="100" style="fill:rgb(0,0,255)"></rect>
<rect x="100" y="100" width="100" height="100" style="fill:rgb(0,10,250)"></rect>
<rect x="200" y="100" width="100" height="100" style="fill:rgb(0,20,245)"></rect>
<rect x="300" y="100" width="100" height="100" style="fill:rgb(0,30,240)"></rect>
<rect x="400" y="100" width="100" height="100" style="fill:rgb(0,40,235)"></rect>
<rect x="500" y="100" width="100" height="100" style="fill:rgb(0,50,230)"></rect>
<rect x="600" y="100" width="100" height="100" style="fill:rgb(0,60,225)"></rect>
<rect x="700" y="100" width="100" height="100" style="fill:rgb(0,70,220)"></rect>
<rect x="800" y="100" width="100" height="100" style="fill:rgb(0,80,215)"></rect>
<rect x="900" y="100" width="100" height="100" style="fill:rgb(0,90,210)"></rect>
<rect x="1000" y="100" width="100" height="100" style="fill:rgb(0,100,205)"></rect>
<rect x="1100" y="100" width="100" height="100" style="fill:rgb(0,110,200)"></rect>
<rect x="1200" y="100" width="100" height="100" style="fill:rgb(0,120,195)"></rect>
<rect x="1300" y="100" width="100" height="100" style="fill:rgb(0,130,190)"></rect>
<rect x="1400" y="100" width="100" height="100" style="fill:rgb(0,140,185)"></rect>
</g>
</svg>
</body>
</html>
That's antialiasing, try set shape-rendering="crispEdges" as an attribute on the <g> parent element to disable that.
<html>
<body>
<svg width="1000" height="1000" viewBox="0 0 5000 5000">
<g shape-rendering="crispEdges">
<rect x="0" y="0" width="100.1" height="100" style="fill:rgb(0,0,255)"></rect>
<rect x="100" y="0" width="100.1" height="100" style="fill:rgb(0,0,250)"></rect>
<rect x="200" y="0" width="100.1" height="100" style="fill:rgb(0,0,245)"></rect>
<rect x="300" y="0" width="100.1" height="100" style="fill:rgb(0,0,240)"></rect>
<rect x="400" y="0" width="100.1" height="100" style="fill:rgb(0,0,235)"></rect>
<rect x="500" y="0" width="100.1" height="100" style="fill:rgb(0,0,230)"></rect>
<rect x="600" y="0" width="100.1" height="100" style="fill:rgb(0,0,225)"></rect>
<rect x="700" y="0" width="100.1" height="100" style="fill:rgb(0,0,220)"></rect>
<rect x="800" y="0" width="100.1" height="100" style="fill:rgb(0,0,215)"></rect>
<rect x="900" y="0" width="100.1" height="100" style="fill:rgb(0,0,210)"></rect>
<rect x="1000" y="0" width="100.1", height="100" style="fill:rgb(0,0,205)"></rect>
<rect x="1100" y="0" width="100.1" height="100" style="fill:rgb(0,0,200)"></rect>
<rect x="1200" y="0" width="100.1" height="100" style="fill:rgb(0,0,195)"></rect>
<rect x="1300" y="0" width="100.1" height="100" style="fill:rgb(0,0,190)"></rect>
<rect x="1400" y="0" width="100.1" height="100" style="fill:rgb(0,0,185)"></rect>
<rect x="0" y="100" width="100" height="100" style="fill:rgb(0,0,255)"></rect>
<rect x="100" y="100" width="100" height="100" style="fill:rgb(0,10,250)"></rect>
<rect x="200" y="100" width="100" height="100" style="fill:rgb(0,20,245)"></rect>
<rect x="300" y="100" width="100" height="100" style="fill:rgb(0,30,240)"></rect>
<rect x="400" y="100" width="100" height="100" style="fill:rgb(0,40,235)"></rect>
<rect x="500" y="100" width="100" height="100" style="fill:rgb(0,50,230)"></rect>
<rect x="600" y="100" width="100" height="100" style="fill:rgb(0,60,225)"></rect>
<rect x="700" y="100" width="100" height="100" style="fill:rgb(0,70,220)"></rect>
<rect x="800" y="100" width="100" height="100" style="fill:rgb(0,80,215)"></rect>
<rect x="900" y="100" width="100" height="100" style="fill:rgb(0,90,210)"></rect>
<rect x="1000" y="100" width="100" height="100" style="fill:rgb(0,100,205)"></rect>
<rect x="1100" y="100" width="100" height="100" style="fill:rgb(0,110,200)"></rect>
<rect x="1200" y="100" width="100" height="100" style="fill:rgb(0,120,195)"></rect>
<rect x="1300" y="100" width="100" height="100" style="fill:rgb(0,130,190)"></rect>
<rect x="1400" y="100" width="100" height="100" style="fill:rgb(0,140,185)"></rect>
</g>
</svg>
</body>
</html>

How to create a symbol from another symbol using viewBox properly?

The following SVG does not display as I expect it to.
The brief description/ intent is:
I create a symbol which is a large square comprised of smaller rectangles
I then create "slices" of this large square in smaller symbols using viewBox and preserveAspectRatio
I then display some of these symbols with <use>
The problem is that the "sliced" symbols which touch the right or bottom edge are not full sized, and instead appear as small slivers.
How can I fix this?
What it looks like (click for full image):
Interestingly, if I change the main <symbol> to a <g> instead, I get a very different looking result, which suffers from the same problem
What it should look like (click for full image):
Files available at this gist,
also copied below for your convenience.
This illustrates the problem:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="box">
<!--top left-->
<rect x="0" y="0" height="100" width="100"
style="fill:#0000ff" />
<!--top middle-->
<rect x="100" y="0" height="100" width="300"
style="fill:#008888" />
<!--top right-->
<rect x="400" y="0" height="100" width="100"
style="fill:#00ff00" />
<!--middle left-->
<rect x="0" y="100" height="300" width="100"
style="fill:#888800" />
<!--middle middle-->
<rect x="100" y="100" height="300" width="300"
style="fill:#2a2a2a" />
<!--middle right-->
<rect x="400" y="100" height="300" width="100"
style="fill:#ff0000" />
<!--bottom left-->
<rect x="0" y="400" height="100" width="100"
style="fill:#000000" />
<!--bottom middle-->
<rect x="100" y="400" height="100" width="300"
style="fill:#ff0088" />
<!--bottom right-->
<rect x="400" y="400" height="100" width="100"
style="fill:#8800ff" />
</symbol>
<symbol id="box-top-left" viewBox="0 0 100 100" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-top-middle" viewBox="100 0 400 100" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-top-right" viewBox="400 0 500 100" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-middle-left" viewBox="0 100 100 400" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-middle-middle" viewBox="100 100 400 400" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-middle-right" viewBox="400 100 500 400" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-bottom-left" viewBox="0 400 100 500" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-bottom-middle" viewBox="100 400 400 500" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-bottom-right" viewBox="400 400 500 500" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
</defs>
<use xlink:href="#box-top-right" x="0" y="0" height="100" width="100" />
<use xlink:href="#box-top-middle" x="100" y="0" height="100" width="300" />
<use xlink:href="#box-top-middle" x="400" y="0" height="100" width="100" />
<use xlink:href="#box-middle-right" x="0" y="100" height="300" width="100" />
<use xlink:href="#box-middle-middle" x="100" y="100" height="300" width="300" />
<use xlink:href="#box-middle-middle" x="400" y="100" height="300" width="100" />
<use xlink:href="#box-bottom-right" x="0" y="400" height="100" width="100" />
<use xlink:href="#box-bottom-middle" x="100" y="400" height="100" width="300" />
<use xlink:href="#box-bottom-middle" x="400" y="400" height="100" width="100" />
</svg>
This is what it should look like:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="box">
<!--top left-->
<rect x="0" y="0" height="100" width="100"
style="fill:#0000ff" />
<!--top middle-->
<rect x="100" y="0" height="100" width="300"
style="fill:#008888" />
<!--top right-->
<rect x="400" y="0" height="100" width="100"
style="fill:#00ff00" />
<!--middle left-->
<rect x="0" y="100" height="300" width="100"
style="fill:#888800" />
<!--middle middle-->
<rect x="100" y="100" height="300" width="300"
style="fill:#2a2a2a" />
<!--middle right-->
<rect x="400" y="100" height="300" width="100"
style="fill:#ff0000" />
<!--bottom left-->
<rect x="0" y="400" height="100" width="100"
style="fill:#000000" />
<!--bottom middle-->
<rect x="100" y="400" height="100" width="300"
style="fill:#ff0088" />
<!--bottom right-->
<rect x="400" y="400" height="100" width="100"
style="fill:#8800ff" />
</symbol>
<symbol id="box-top-left" viewBox="0 0 100 100" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-top-middle" viewBox="100 0 400 100" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-top-right" viewBox="400 0 500 100" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-middle-left" viewBox="0 100 100 400" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-middle-middle" viewBox="100 100 400 400" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-middle-right" viewBox="400 100 500 400" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-bottom-left" viewBox="0 400 100 500" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-bottom-middle" viewBox="100 400 400 500" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-bottom-right" viewBox="400 400 500 500" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
</defs>
<use xlink:href="#box" x="0" y="0" height="500" width="500" />
</svg>
Solution found. My error was in not using the viewBox attribute in a <symbol> correctly.
It should be viewBox="minX minY width height"
Instead of viewBox="minx minY maxX maxY"
The working SVG is (click for full size):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="box">
<!--top left-->
<rect x="0" y="0" height="100" width="100"
style="fill:#0000ff" />
<!--top middle-->
<rect x="100" y="0" height="100" width="300"
style="fill:#008888" />
<!--top right-->
<rect x="400" y="0" height="100" width="100"
style="fill:#00ff00" />
<!--middle left-->
<rect x="0" y="100" height="300" width="100"
style="fill:#888800" />
<!--middle middle-->
<rect x="100" y="100" height="300" width="300"
style="fill:#2a2a2a" />
<!--middle right-->
<rect x="400" y="100" height="300" width="100"
style="fill:#ff0000" />
<!--bottom left-->
<rect x="0" y="400" height="100" width="100"
style="fill:#000000" />
<!--bottom middle-->
<rect x="100" y="400" height="100" width="300"
style="fill:#ff0088" />
<!--bottom right-->
<rect x="400" y="400" height="100" width="100"
style="fill:#8800ff" />
</g>
<symbol id="box-top-left" viewBox="0 0 100 100" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-top-middle" viewBox="100 0 300 100" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-top-right" viewBox="400 0 100 100" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-middle-left" viewBox="0 100 100 300" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-middle-middle" viewBox="100 100 300 300" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-middle-right" viewBox="400 100 100 300" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-bottom-left" viewBox="0 400 100 100" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-bottom-middle" viewBox="100 400 300 100" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
<symbol id="box-bottom-right" viewBox="400 400 100 100" preserveAspectRatio="none">
<use xlink:href="#box" style="overflow:none;" />
</symbol>
</defs>
<use xlink:href="#box-top-left" x="0" y="0" height="100" width="100" />
<use xlink:href="#box-top-middle" x="100" y="0" height="100" width="300" />
<use xlink:href="#box-top-right" x="400" y="0" height="100" width="100" />
<use xlink:href="#box-middle-left" x="0" y="100" height="300" width="100" />
<use xlink:href="#box-middle-middle" x="100" y="100" height="300" width="300" />
<use xlink:href="#box-middle-right" x="400" y="100" height="300" width="100" />
<use xlink:href="#box-bottom-left" x="0" y="400" height="100" width="100" />
<use xlink:href="#box-bottom-middle" x="100" y="400" height="100" width="300" />
<use xlink:href="#box-bottom-right" x="400" y="400" height="100" width="100" />
</svg>

Resources