Abutted rect elements in SVG leave a tiny gap - svg

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>

Related

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.

How to apply svg pattern to different rectangles using objectBoundingBox coordinate system and keep aspect ratio?

I.e. in this code the pattern applied with gap between the tiles or overlaping.
<svg width="400" height="400">
<defs>
<pattern id="pattern1"
x="0" y="0" width="0.1" height="0.2"
patternUnits="objectBoundingBox"
>
<circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<rect x="10" y="10" width="170" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
<rect x="10" y="110" width="235" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
</svg>
How to do that tiles were placed side by side and the last tile which is not fit in rectangle will be sliced?

You can't do what you want with objectBoundingBox units. You need to use patternUnits="userSpaceOnUse".
<svg width="400" height="400">
<defs>
<pattern id="pattern1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<rect x="10" y="10" width="170" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
<rect x="10" y="110" width="235" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
</svg>
But, as you can see, the default pattern origin is at the origin of the SVG document (the top left). To change that so that the pattern is aligned with the rectangles, you'll need to define the rectangles at the origin and move them into position with a transform.
<svg width="400" height="400">
<defs>
<pattern id="pattern1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<rect x="0" y="0" width="170" height="100" transform="translate(10,10)"
style="stroke: #000000; fill: url(#pattern1);" />
<rect x="0" y="0" width="235" height="100" transform="translate(10,110)"
style="stroke: #000000; fill: url(#pattern1);" />
</svg>

svg groups and fill inheritance

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.

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>

Imagemagick svg conversion

I have a svg file which I want to be converted into jpg/png. Probem is that conversion is fine if there is no background image. But when I try to put some background image its not being rendered in the converted image and showing plain background color.
content of svg:
<svg height="370" version="1.1" width="350" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.5px;">
<defs>
<pattern id="38A07B9C-47E8-4E02-A005-E6E4443FE5D0" x="0" y="0" patternUnits="userSpaceOnUse" height="300" width="300" patternTransform="matrix(1,0,0,1,0,0) translate(0,20)">
<image x="0" y="0" href="/home/mahad/public_html/svg/user-backgrounds/4f41f6a2a75dc_back.png" width="300" height="300"/>
</pattern>
</defs>
<rect x="0" y="0" width="350" height="370" r="0" rx="0" ry="0" fill="#ffffff" stroke="none" style=""/>
<rect x="0" y="20" width="350" height="350" r="0" rx="0" ry="0" fill="url(#38A07B9C-47E8-4E02-A005-E6E4443FE5D0)" stroke="none" style="fill: url("#38A07B9C-47E8-4E02-A005-E6E4443FE5D0") rgb(0, 0, 0); opacity: 0.38;" opacity="0.38"/>
<rect x="0" y="20" width="14" height="14" r="0" rx="0" ry="0" fill="#000000" stroke="none" style=""/>
<text style="text-anchor: middle; font: 12px "Arial"; opacity: 1;" x="100" y="100" text-anchor="middle" font="10px "Arial"" stroke="none" fill="#ff0000" font-size="12px" opacity="1" transform="matrix(1,0,0,1,73,92)">
<tspan dy="4.5">helllloooo...</tspan>
</text>
</svg>
conversion command:
echo exec("/usr/bin/convert /home/public_html/qr.svg /home/public_html/qr.png");
please help

In my case, installing librsvg2-bin fixed the problem:
sudo apt-get install librsvg2-bin

Resources