I'm trying to convert a music score rendered in svg by the verovio toolkit to a png. With basic „normal“ svgs this works fine. But the verovio svg somehow looks only half rendered (example is here). I'm not experienced with svg but maybe I just get some of the parameters wrong or is it the kind of svg that makes it problematic?
The python code that produces the png above looks the following:
import cairosvg
s = cairosvg.svg2png(svgString)
with open('myscore.png', 'wb') as f:
f.write(s)
Thanks for any hint or advice.
I put the svgString content as rendered by verovio here as well:
<svg width="675px" height="216px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:mei="http://www.music-encoding.org/ns/mei" overflow="visible">
<desc>Engraved by Verovio 3.3.0-e62c7d5</desc>
<defs>
<symbol id="E050" viewBox="0 0 1000 1000" overflow="inherit">
<path transform="scale(1,-1)" d="M441 -245c-23 -4 -48 -6 -76 -6c-59 0 -102 7 -130 20c-88 42 -150 93 -187 154c-26 44 -43 103 -48 176c0 6 -1 13 -1 19c0 54 15 111 45 170c29 57 65 106 110 148s96 85 153 127c-3 16 -8 46 -13 92c-4 43 -5 73 -5 89c0 117 16 172 69 257c34 54 64 82 89 82 c21 0 43 -30 69 -92s39 -115 41 -159v-15c0 -109 -21 -162 -67 -241c-13 -20 -63 -90 -98 -118c-13 -9 -25 -19 -37 -29l31 -181c8 1 18 2 28 2c58 0 102 -12 133 -35c59 -43 92 -104 98 -184c1 -7 1 -15 1 -22c0 -123 -87 -209 -181 -248c8 -57 17 -110 25 -162 c5 -31 6 -58 6 -80c0 -30 -5 -53 -14 -70c-35 -64 -88 -99 -158 -103c-5 0 -11 -1 -16 -1c-37 0 -72 10 -108 27c-50 24 -77 59 -80 105v11c0 29 7 55 20 76c18 28 45 42 79 44h6c49 0 93 -42 97 -87v-9c0 -51 -34 -86 -105 -106c17 -24 51 -36 102 -36c62 0 116 43 140 85 c9 16 13 41 13 74c0 20 -1 42 -5 67c-8 53 -18 106 -26 159zM461 939c-95 0 -135 -175 -135 -286c0 -24 2 -48 5 -71c50 39 92 82 127 128c40 53 60 100 60 140v8c-4 53 -22 81 -55 81h-2zM406 119l54 -326c73 25 110 78 110 161c0 7 0 15 -1 23c-7 95 -57 142 -151 142h-12 zM382 117c-72 -2 -128 -47 -128 -120v-7c2 -46 43 -99 75 -115c-3 -2 -7 -5 -10 -10c-70 33 -116 88 -123 172v11c0 68 44 126 88 159c23 17 49 29 78 36l-29 170c-21 -13 -52 -37 -92 -73c-50 -44 -86 -84 -109 -119c-45 -69 -67 -130 -67 -182v-13c5 -68 35 -127 93 -176 s125 -73 203 -73c25 0 50 3 75 9c-19 111 -36 221 -54 331z" />
</symbol>
<symbol id="E062" viewBox="0 0 1000 1000" overflow="inherit">
<path transform="scale(1,-1)" d="M158 96c51 0 73 -14 88 -49l16 -39c0 -17 -2 -30 -7 -40c-3 -11 -10 -21 -19 -31c-17 -18 -49 -43 -84 -43c-55 0 -77 13 -112 44c-24 21 -35 55 -35 100c0 46 14 81 32 112c30 52 71 79 137 93l36 6l26 2c154 0 235 -68 274 -182c11 -32 18 -68 18 -107 c0 -103 -26 -182 -68 -250c-89 -145 -234 -230 -412 -288l-30 -5c-9 0 -14 3 -14 8c3 10 5 11 10 16c35 15 70 30 96 44l78 43c96 57 162 136 197 258c9 33 17 60 22 100c3 22 5 35 6 39c-7 69 -16 115 -23 140s-4 22 -16 40c-8 12 -19 23 -31 34c-24 21 -62 44 -118 44 c-48 0 -84 -8 -113 -28c-28 -19 -42 -44 -42 -73v-16c2 -5 3 -9 4 -11c24 22 52 39 84 39zM585 -118c0 32 23 58 57 58c18 0 33 -6 40 -18c9 -15 16 -18 16 -40c0 -9 -2 -16 -5 -21c-6 -19 -27 -37 -51 -37c-34 0 -57 26 -57 58zM642 177c31 0 56 -27 56 -58 c0 -30 -25 -58 -56 -58l-23 3c-19 7 -34 32 -34 55l3 23c9 20 28 35 54 35z" />
</symbol>
<symbol id="E08A" viewBox="0 0 1000 1000" overflow="inherit">
<path transform="scale(1,-1)" d="M340 179c-9 24 -56 41 -89 41c-46 0 -81 -28 -100 -58c-17 -28 -25 -78 -25 -150c0 -65 2 -111 8 -135c8 -31 18 -49 40 -67c20 -17 43 -25 70 -25c54 0 92 36 115 75c14 25 23 54 28 88h27c0 -63 -24 -105 -58 -141c-35 -38 -82 -56 -140 -56c-45 0 -83 13 -115 39 c-57 45 -101 130 -101 226c0 59 33 127 68 163c36 37 97 72 160 72c36 0 93 -21 121 -40c11 -8 23 -17 33 -30c19 -23 27 -48 27 -76c0 -51 -35 -88 -86 -88c-43 0 -76 27 -76 68c0 26 7 35 21 51c15 17 32 27 58 32c7 2 14 7 14 11z" />
</symbol>
<symbol id="E0A2" viewBox="0 0 1000 1000" overflow="inherit">
<path transform="scale(1,-1)" d="M198 133c102 0 207 -45 207 -133c0 -92 -98 -133 -207 -133c-101 0 -198 46 -198 133c0 88 93 133 198 133zM293 -21c0 14 -3 29 -8 44c-7 20 -18 38 -33 54c-20 21 -43 31 -68 31l-20 -2c-15 -5 -27 -14 -36 -28c-4 -9 -6 -17 -8 -24s-3 -16 -3 -27c0 -15 3 -34 9 -57 s18 -41 34 -55c15 -15 36 -23 62 -23c4 0 10 1 18 2c19 5 32 15 40 30s13 34 13 55z" />
</symbol>
<symbol id="E262" viewBox="0 0 1000 1000" overflow="inherit">
<path transform="scale(1,-1)" d="M136 186v169h17v-164l44 14v-91l-44 -14v-165l44 12v-91l-44 -13v-155h-17v150l-76 -22v-155h-17v149l-43 -13v90l43 14v167l-43 -14v92l43 13v169h17v-163zM60 73v-167l76 22v168z" />
</symbol>
</defs>
<style type="text/css">g.page-margin{font-family:Times;} g.reh, g.tempo{font-weight:bold;} g.dir, g.dynam, g.mNum{font-style:italic;} g.label{font-weight:normal;}</style>
<svg class="definition-scale" color="black" viewBox="0 0 15000 4800">
<g class="page-margin" transform="translate(500, 500)">
<g id="system-0000001941505672" class="system">
<path d="M13 255 L13 2775" stroke="currentColor" stroke-width="27" />
<g id="section-0000001463337835" class="section boundaryStart" />
<g id="pb-0000001336267401" class="pb" />
<g id="measure-0000001159844410" class="measure">
<g id="staff-0000000091667497" class="staff">
<path d="M0 255 L3441 255" stroke="currentColor" stroke-width="13" />
<path d="M0 435 L3441 435" stroke="currentColor" stroke-width="13" />
<path d="M0 615 L3441 615" stroke="currentColor" stroke-width="13" />
<path d="M0 795 L3441 795" stroke="currentColor" stroke-width="13" />
<path d="M0 975 L3441 975" stroke="currentColor" stroke-width="13" />
<g id="clef-0000000319074709" class="clef">
<use xlink:href="#E050" x="90" y="795" height="720px" width="720px" />
</g>
<g id="keysig-0000000421967604" class="keySig">
<use xlink:href="#E262" x="771" y="255" height="720px" width="720px" />
<use xlink:href="#E262" x="949" y="525" height="720px" width="720px" />
</g>
<g id="msig-0000001018518034" class="meterSig">
<use xlink:href="#E08A" x="1270" y="615" height="720px" width="720px" />
</g>
<g id="layer-0000000909847180" class="layer">
<g id="mSpace-0000001300295425" class="mSpace" />
</g>
</g>
<g id="staff-0000000129334338" class="staff">
<path d="M0 2055 L3441 2055" stroke="currentColor" stroke-width="13" />
<path d="M0 2235 L3441 2235" stroke="currentColor" stroke-width="13" />
<path d="M0 2415 L3441 2415" stroke="currentColor" stroke-width="13" />
<path d="M0 2595 L3441 2595" stroke="currentColor" stroke-width="13" />
<path d="M0 2775 L3441 2775" stroke="currentColor" stroke-width="13" />
<g id="clef-0000000640447201" class="clef">
<use xlink:href="#E062" x="90" y="2235" height="720px" width="720px" />
</g>
<g id="keysig-0000000808068443" class="keySig">
<use xlink:href="#E262" x="771" y="2235" height="720px" width="720px" />
<use xlink:href="#E262" x="949" y="2505" height="720px" width="720px" />
</g>
<g id="msig-0000000519737873" class="meterSig">
<use xlink:href="#E08A" x="1270" y="2415" height="720px" width="720px" />
</g>
<g id="layer-0000000468768002" class="layer">
<g id="note-0000001613792418" class="note">
<g class="notehead">
<use xlink:href="#E0A2" x="1838" y="2415" height="720px" width="720px" />
</g>
</g>
</g>
</g>
<g id="bline-0000000012782771" class="barLineAttr">
<path d="M3428 975 L3428 255" stroke="currentColor" stroke-width="27" />
<path d="M3428 2775 L3428 2055" stroke="currentColor" stroke-width="27" />
</g>
</g>
<g id="measure-0000001271616103" class="measure">
<g id="staff-0000000798561613" class="staff">
<path d="M3441 255 L5224 255" stroke="currentColor" stroke-width="13" />
<path d="M3441 435 L5224 435" stroke="currentColor" stroke-width="13" />
<path d="M3441 615 L5224 615" stroke="currentColor" stroke-width="13" />
<path d="M3441 795 L5224 795" stroke="currentColor" stroke-width="13" />
<path d="M3441 975 L5224 975" stroke="currentColor" stroke-width="13" />
<g id="layer-0000001799719588" class="layer">
<g id="mSpace-0000001897195361" class="mSpace" />
</g>
</g>
<g id="staff-0000001348127086" class="staff">
<path d="M3441 2055 L5224 2055" stroke="currentColor" stroke-width="13" />
<path d="M3441 2235 L5224 2235" stroke="currentColor" stroke-width="13" />
<path d="M3441 2415 L5224 2415" stroke="currentColor" stroke-width="13" />
<path d="M3441 2595 L5224 2595" stroke="currentColor" stroke-width="13" />
<path d="M3441 2775 L5224 2775" stroke="currentColor" stroke-width="13" />
<g id="layer-0000002019458552" class="layer">
<g id="note-0000000060842629" class="note">
<g class="notehead">
<use xlink:href="#E0A2" x="3621" y="2235" height="720px" width="720px" />
</g>
<g id="accid-0000000379849631" class="accid" />
<g id="verse-0000001811349333" class="verse">
<title class="labelAttr">1</title>
<g id="syl-0000000620059859" class="syl">
<text x="3531" y="3267" font-size="0px">
<tspan id="text-0000001755394969" class="text">
<tspan font-size="405px" class="text">6</tspan>
</tspan>
</text>
</g>
</g>
<g id="verse-0000000792901497" class="verse">
<title class="labelAttr">2</title>
<g id="syl-0000001159430444" class="syl">
<text x="3531" y="3667" font-size="0px">
<tspan id="text-0000000280859430" class="text">
<tspan font-size="405px" class="text">b5</tspan>
</tspan>
</text>
</g>
</g>
</g>
</g>
</g>
<g id="bline-0000001563991099" class="barLineAttr">
<path d="M5211 975 L5211 255" stroke="currentColor" stroke-width="27" />
<path d="M5211 2775 L5211 2055" stroke="currentColor" stroke-width="27" />
</g>
</g>
<g id="measure-0000000325241671" class="measure">
<g id="staff-0000000297628127" class="staff">
<path d="M5224 255 L7106 255" stroke="currentColor" stroke-width="13" />
<path d="M5224 435 L7106 435" stroke="currentColor" stroke-width="13" />
<path d="M5224 615 L7106 615" stroke="currentColor" stroke-width="13" />
<path d="M5224 795 L7106 795" stroke="currentColor" stroke-width="13" />
<path d="M5224 975 L7106 975" stroke="currentColor" stroke-width="13" />
<g id="layer-0000000746516626" class="layer">
<g id="mSpace-0000001709696059" class="mSpace" />
</g>
</g>
<g id="staff-0000002102365359" class="staff">
<path d="M5224 2055 L7106 2055" stroke="currentColor" stroke-width="13" />
<path d="M5224 2235 L7106 2235" stroke="currentColor" stroke-width="13" />
<path d="M5224 2415 L7106 2415" stroke="currentColor" stroke-width="13" />
<path d="M5224 2595 L7106 2595" stroke="currentColor" stroke-width="13" />
<path d="M5224 2775 L7106 2775" stroke="currentColor" stroke-width="13" />
<g id="layer-0000001906144622" class="layer">
<g id="note-0000000411616008" class="note">
<g class="notehead">
<use xlink:href="#E0A2" x="5404" y="2145" height="720px" width="720px" />
</g>
</g>
</g>
</g>
<g id="bline-0000001926709320" class="barLineAttr">
<path d="M6994 975 L6994 255" stroke="currentColor" stroke-width="27" />
<path d="M7093 975 L7093 255" stroke="currentColor" stroke-width="27" />
<path d="M6994 2775 L6994 2055" stroke="currentColor" stroke-width="27" />
<path d="M7093 2775 L7093 2055" stroke="currentColor" stroke-width="27" />
</g>
</g>
<g id="bdend-0000001566348176" class="boundaryEnd section-0000001463337835" />
</g>
</g>
</svg>
</svg>
Related
Displaying this SVG at width=100px is fine, but on Chrome & Edge & Brave width=110px distorts the gold slice.
FireFox displays the slices correct.
Anything I can do to fix it in Chromium?
<style>
svg {
background: teal;
}
</style>
<svg width="100px" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 110 110" stroke-width="50" >
<path stroke-dasharray="90 270" stroke-dashoffset="90" pathLength="360"
d="M82.5 55a27.5 27.5 0 1 0-55 0a27.5 27.5 0 1 0 55 0" fill="none" value="90" stroke="blue"></path>
<path stroke-dasharray="45 315" stroke-dashoffset="135" pathLength="360"
d="M82.5 55a27.5 27.5 0 1 0-55 0a27.5 27.5 0 1 0 55 0" fill="none" value="45" stroke="gold"></path>
<path stroke-dasharray="30 330" stroke-dashoffset="165" pathLength="360"
d="M82.5 55a27.5 27.5 0 1 0-55 0a27.5 27.5 0 1 0 55 0" fill="none" value="30" stroke="red"></path>
</svg>
<svg width="110px" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 110 110" stroke-width="50">
<path stroke-dasharray="90 270" stroke-dashoffset="90" pathLength="360"
d="M82.5 55a27.5 27.5 0 1 0-55 0a27.5 27.5 0 1 0 55 0" fill="none" value="90" stroke="blue"></path>
<path stroke-dasharray="45 315" stroke-dashoffset="135" pathLength="360"
d="M82.5 55a27.5 27.5 0 1 0-55 0a27.5 27.5 0 1 0 55 0" fill="none" value="45" stroke="gold"></path>
<path stroke-dasharray="30 330" stroke-dashoffset="165" pathLength="360"
d="M82.5 55a27.5 27.5 0 1 0-55 0a27.5 27.5 0 1 0 55 0" fill="none" value="30" stroke="red"></path>
</svg>
I'm trying to center the play svg inside the middle of the SVG circle and can't seem to figure out how to do this.
Vertically, and Horizontally.
https://jsfiddle.net/c0qshm0t/17/
<svg width="64" height="64" style="background-color:black;" viewBox="25 9 50 82">
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="3" fill="gray" />
<svg viewBox="0 0 1229 1481" width="24" height="29" style="background-color:green;">
<path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red" />
</svg>
</svg>
You can position the inner <svg> by setting x and y attributes. The position should be:
x = outer_svg_viewBox_centre_X - (inner_svg_width / 2)
y = outer_svg_viewBox_centre_Y - (inner_svg_height / 2)
So in the case of this SVG those calculations are:
x = (25 + 50/2) - 24/2
= 50 - 12
= 38
y = (9 + 82/2) - 29/2
= 50 - 14.5
= 35.5
<svg width="64" height="64" style="background-color:black;" viewBox="25 9 50 82">
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="3" fill="gray" />
<svg x="38" y="35.5"
viewBox="0 0 1229 1481" width="24" height="29" style="background-color:green;">
<path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red" />
</svg>
</svg>
I am currently running into the following error when trying to load an SVG file into my java application using Apache's Batik library:
java.io.IOException: Root element namespace does not match that requested:
Requested: http://www.w3.org/2000/svg
Found: null
I know that this question was asked here, but the OP's solution was to remove an invalid element.
Does anyone know anything else on this error? Below is my svg file that is causing the exception:
<div id="MapMarker">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="41 -24 118 178" width="118" height="178" version="1.2" baseProfile="tiny">
<path fill="rgb(255, 128, 128)" fill-opacity="1" stroke="black" stroke-width="4" d="M 45 150 L 45 70 L 100 20 L 155 70 L 155 150" />
<path fill="rgb(255, 255, 128)" stroke="black" stroke-width="4" d="M 90 135 l 0 -10 l 5 -5 l 0 -55 l 5 -5 l 5 5 l 0 55 l 5 5 l 0 10 l -10 -10 Z" />
<text font-family="Arial" font-size="30" font-weight="bold" fill="black" stroke="none" stroke-width="4" text-anchor="middle" x="68" y="110">S</text>
<text font-family="Arial" font-size="30" font-weight="bold" fill="black" stroke="none" stroke-width="4" text-anchor="middle" x="132" y="110">A</text>
<g fill="none" stroke="black" stroke-width="4" transform="translate(0)">
<path d="M 100 10 L 100 -15" />
<path d="M 120 10 L 120 -15" />
<path d="M 80 10 L 80 -15" />
</g>
</svg>
</div>
I'm currently trying to create the SVG of an old image, however I have trouble creating the correct rotated and positioned text cutout.
When I try to add a <text> element it ends up stretched, under the form or is not visible at all.
Here is what I came up with so far:
<svg
height="360px"
width="100%"
preserveAspectRatio="none"
viewBox="0 0 100 360"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path
id="banner"
d="M0,186 L 100,0 100,186 0,360 Z"
fill="#2180b3"
vector-effect="non-scaling-stroke" />
</defs>
<use xlink:href="#banner" />
</svg>
And here is what I'm trying to archive:
The cutout should be white
Thanks!
You can just use an image to svg converter like this one
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="1280.000000pt" height="376.000000pt" viewBox="0 0 1280.000000 376.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.13, written by Peter Selinger 2001-2015
</metadata>
<g transform="translate(0.000000,376.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M12700 3702 c-52 -7 -95 -14 -96 -15 -14 -22 -434 -961 -432 -966 2
-5 143 -157 313 -339 l310 -330 3 413 c1 227 1 602 0 832 l-3 418 -95 -13z"/>
<path d="M11785 3569 c-176 -26 -331 -49 -343 -51 -21 -3 0 -33 199 -283 184
-231 223 -276 230 -260 10 28 240 617 246 633 3 6 1 11 -3 11 -5 -1 -153 -23
-329 -50z"/>
<path d="M5440 2648 c-2989 -435 -5436 -792 -5438 -793 -1 -1 -1 -391 0 -866
l3 -864 5592 760 c3076 418 5596 765 5601 770 10 10 441 948 449 976 3 10
-122 155 -352 410 -319 353 -360 394 -388 396 -18 1 -2478 -354 -5467 -789z"/>
<path d="M11818 2058 c-75 -189 -135 -344 -134 -344 1 -2 669 88 732 98 18 2
-14 46 -208 283 -126 154 -234 286 -242 293 -10 10 -38 -52 -148 -330z"/>
</g>
</svg>
How I can draw a SVG path with a repeated symbol along the path ?
An example in this picture :
http://i.stack.imgur.com/jqy0Z.png
Thanks a lot !
You can use a <marker> element to place a symbol at each vertex of a polyline. This has the advantage that the symbols can be automatically aligned to the path direction. However, you will still have to place each vertex there yourself. I don't think there is any way of having a symbol repeat automatically at a fixed interval along a path.
<svg width="400" height="100" viewBox="0 0 400 100">
<defs>
<marker id="chevron"
viewBox="0 0 20 20" refX="10" refY="10"
markerUnits="userSpaceOnUse"
markerWidth="20" markerHeight="20"
orient="auto" fill="#49f">
<path d="M0 0 10 0 20 10 10 20 0 20 10 10Z" />
</marker>
</defs>
<path d="M40 50 60 59.57 80 67.68 100 73.1 120 75 140 73.1 160 67.68 180 59.57 200 50 220 40.43 240 32.32 260 26.9 280 25 300 26.9 320 32.32 340 40.43 360 50"
fill="none" stroke="none"
marker-start="url(#chevron)"
marker-mid="url(#chevron)"
marker-end="url(#chevron)" />
</svg>