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>
Related
I have this SVG path:
<svg viewBox="0 0 500 500">
<path fill="red" d="
M 326 147
C 329 135 345 130 355 137
C 376 150 385 188 362 197
C 339 206 318 170 326 147
M 381 222
C 418 214 408 157 385 127
C 370 108 340 96 326 115
C 296 154 334 233 381 222
">
</path>
<g>
<path fill="blue" d="M 326 151 A 4 4 0 1 1 326.00399999933336 150.99999800000018 Z"></path>
<path fill="blue" d="M 355 141 A 4 4 0 1 1 355.00399999933336 140.99999800000018 Z"></path>
<path fill="blue" d="M 362 203.54315907595438 A 5.999822352380809 5.999822352380809 0 1 1 362.0059998213524 203.54315607604343 Z"></path>
<path fill="blue" d="M 326 119.76249999999999 A 4 4 0 1 1 326.00399999933336 119.76249800000015 Z"></path>
<path fill="blue" d="M 385 132 A 4 4 0 1 1 385.00399999933336 131.99999800000018 Z"></path>
<path fill="blue" d="M 381 228.81468927464363 A 5.9996841892833 5.9996841892833 0 1 1 381.0059996831893 228.81468627480177 Z"></path>
</g>
</svg>
Live demo: https://jsfiddle.net/BlackLabel/coa9hd7g/
I'm trying to get SVG that starts from A1 and A2 and ends on C1 and C2 like on the image below:
Any clues on how to achieve it? Thanks in advance!
You can delete the last bezier from every group, change the M command in the middle with a line L and close the path with a Z like so:
svg{width:90vh}
<svg viewBox="300 100 150 150">
<path fill="red" d="
M 326 147
C 329 135 345 130 355 137
C 376 150 385 188 362 197
L 381 222
C 418 214 408 157 385 127
C 370 108 340 96 326 115
z
">
</path>
I have svg file that looks like this
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="300.000000pt" height="226.000000pt" viewBox="0 0 300.000000 226.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,226.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M891 2162 c-95 -33 -418 -606 -616 -1092 -75 -185 -106 -330 -70 -67 -2 3 7 36 19 75 13
27 67 2 -3 -7 -36 -19 -75z"/>
<path d="M1316 2019 c-33 -39 -8035 -57 -37 -58 -82 -59 -25 0 -55 -2 -66 -4 -11 -2 -58 -8 -104
-15 -158 -22 -330 -77 -315 -101 10 -17 85 -5 311 51 -12 -15 -27z"/>
<path d="M925 1349 c-4 -6 -5 -12 -2 -15 2 -3 7 2 10 11 7 17 1 20 -8 4z"/>
</g>
</svg>
I want to get d attribute of each path element and combine it in one svg path string (that consists of all three paths )
I've tried this buy only get first one every time
fs.readFile(path_to_svg,'utf8',(err,data)=>{
if(err) console.log(err);
$ = cheerio.load(data,{ xmlMode : true });
$('svg').children().each(function(i,path){
console.log($('path').attr('d'))
});
});
You can get those with:
$('svg path').get().map(path => $(path).attr('d'))
I have a font that I'm using in SVG's that has hollow parts inside some letters:
How do I fill in just that inner part to get something like this?
I feel like it should be something with fill-rule + a clip or mask maybe?
<style>
#import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap');
</style>
<svg viewport="0 0 100 100">
<rect ry="8" rx="8" id="svg_2" height="100" width="100" y="0" x="0" stroke-width="5" fill="#bfbfbf"/><text font-family="Bungee Shade" text-anchor="middle" x="50" y="78" font-size="100" fill="Red">F</text>
</svg>
There is no simple way to do what you want.
The trouble is that the font glyph has been designed with a hole in it. There is no CSS property that you can apply to the text that will fill in the hole.
You would need to convert the text to paths, then either:
import the paths into a vector editor and draw the missing fill, or
examine the paths definition and extract the section that corresponds to the "hole"
I suppose the other thing you could try is overlay the "Bungee Inline" font so that it lines up with the holes. You will likely have to fiddle with the font size and letterspacing. But it might work...
With 0.1em of letter spacing and a left margin of 0.145em, the inline font seems to match up fairly well. But for best results, use the tool at djr.com/bungee#tester, where you can generate SVGs quite easily. There's also a JQuery tool that you can use to style text automatically in web pages. It's made by the font's developer, so it ought to work perfectly.
Here's an SVG I made using their tool. It just needed a bit of editing to fit it into a square and add a background with rounded corners:
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='6 39 140 140'>
<defs>
<path id='shade-notdef' d='M735 -159C749 -159 760 -155 766 -149L896 -41C905 -33 910 -22 910 -4V724C910 756 896 770 864 770H136C122 770 111 767 104 761L-25 652C-34 644 -39 633 -39 615V-113C-39 -145 -25 -159 7 -159ZM711 591V20H160V591Z' />
<path id='shade-46' d='M131 -119C145 -119 156 -115 162 -109L292 -1C301 7 306 18 306 36V114H341C355 114 366 118 372 124L502 232C511 240 516 251 516 269V389C516 421 502 435 471 435L583 528C592 536 597 547 597 565V684C597 716 583 730 551 730H105C91 730 80 727 73 721L-56 612C-65 604 -70 593 -70 575V-73C-70 -105 -56 -119 -24 -119Z' />
<path id='outline-notdef' d='M864 -30C882 -30 890 -22 890 -4V724C890 742 882 750 864 750H136C118 750 110 742 110 724V-4C110 -22 118 -30 136 -30ZM860 720V0H140V720Z' />
<path id='outline-46' d='M105 -10H260C292 -10 306 4 306 36V223H470C502 223 516 237 516 269V389C516 421 502 435 470 435H306V519H551C583 519 597 533 597 565V684C597 716 583 730 551 730H105C73 730 59 716 59 684V36C59 4 73 -10 105 -10Z' />
<path id='regular-notdef' d='M900 -4V724C900 749 889 760 864 760H136C111 760 100 749 100 724V-4C100 -29 111 -40 136 -40H864C889 -40 900 -29 900 -4ZM850 10H150V710H850Z' />
<path id='regular-46' d='M260 0C285 0 296 11 296 36V233H470C495 233 506 244 506 269V389C506 414 495 425 470 425H296V529H551C576 529 587 540 587 565V684C587 709 576 720 551 720H105C80 720 69 709 69 684V36C69 11 80 0 105 0Z' />
<path id='inline-notdef' d='M120 -20H880V740H120ZM870 -10H130V730H870Z' />
<path id='inline-46' d='M178 90H188V324H416V334H188V620H497V630H178Z' />
</defs>
<rect x='6' y='39' width='140' height='140' rx='10' ry='10' style='stroke:none;fill:#bfbfbf' />
<!-- Text: F (1 bytes) -->
<!-- F -->
<use transform='translate(37.76 150.08) scale(0.144 -0.144)' xlink:href='#shade-46' style='stroke:none;fill:#d74332' />
<!-- F -->
<use transform='translate(37.76 150.08) scale(0.144 -0.144)' xlink:href='#outline-46' style='stroke:none;fill:#d74332' />
<!-- F -->
<use transform='translate(37.76 150.08) scale(0.144 -0.144)' xlink:href='#regular-46' style='stroke:none;fill:#000000' />
<!-- F -->
<use transform='translate(37.76 150.08) scale(0.144 -0.144)' xlink:href='#inline-46' style='stroke:none;fill:#d74332' />
</svg>
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>
What I am looking for is a way, either built in or a hack, that makes me able to go from
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="6.877ex" height="2.843ex" style="vertical-align: -0.838ex;" viewBox="0 -863.1 2960.9 1223.9" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg">
<defs>
<path stroke-width="1" id="E1-MJMAIN-28" d="M94 250Q94 319 104 381T127 488T164 576T202 643T244 695T277 729T302 750H315H319Q333 750 333 741Q333 738 316 720T275 667T226 581T184 443T167 250T184 58T225 -81T274 -167T316 -220T333 -241Q333 -250 318 -250H315H302L274 -226Q180 -141 137 -14T94 250Z"></path>
<path stroke-width="1" id="E1-MJMATHI-61" d="M33 157Q33 258 109 349T280 441Q331 441 370 392Q386 422 416 422Q429 422 439 414T449 394Q449 381 412 234T374 68Q374 43 381 35T402 26Q411 27 422 35Q443 55 463 131Q469 151 473 152Q475 153 483 153H487Q506 153 506 144Q506 138 501 117T481 63T449 13Q436 0 417 -8Q409 -10 393 -10Q359 -10 336 5T306 36L300 51Q299 52 296 50Q294 48 292 46Q233 -10 172 -10Q117 -10 75 30T33 157ZM351 328Q351 334 346 350T323 385T277 405Q242 405 210 374T160 293Q131 214 119 129Q119 126 119 118T118 106Q118 61 136 44T179 26Q217 26 254 59T298 110Q300 114 325 217T351 328Z"></path>
<path stroke-width="1" id="E1-MJMAIN-2B" d="M56 237T56 250T70 270H369V420L370 570Q380 583 389 583Q402 583 409 568V270H707Q722 262 722 250T707 230H409V-68Q401 -82 391 -82H389H387Q375 -82 369 -68V230H70Q56 237 56 250Z"></path>
<path stroke-width="1" id="E1-MJMATHI-62" d="M73 647Q73 657 77 670T89 683Q90 683 161 688T234 694Q246 694 246 685T212 542Q204 508 195 472T180 418L176 399Q176 396 182 402Q231 442 283 442Q345 442 383 396T422 280Q422 169 343 79T173 -11Q123 -11 82 27T40 150V159Q40 180 48 217T97 414Q147 611 147 623T109 637Q104 637 101 637H96Q86 637 83 637T76 640T73 647ZM336 325V331Q336 405 275 405Q258 405 240 397T207 376T181 352T163 330L157 322L136 236Q114 150 114 114Q114 66 138 42Q154 26 178 26Q211 26 245 58Q270 81 285 114T318 219Q336 291 336 325Z"></path>
<path stroke-width="1" id="E1-MJMAIN-29" d="M60 749L64 750Q69 750 74 750H86L114 726Q208 641 251 514T294 250Q294 182 284 119T261 12T224 -76T186 -143T145 -194T113 -227T90 -246Q87 -249 86 -250H74Q66 -250 63 -250T58 -247T55 -238Q56 -237 66 -225Q221 -64 221 250T66 725Q56 737 55 738Q55 746 60 749Z"></path>
</defs>
<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)">
<use xlink:href="#E1-MJMAIN-28" x="0" y="0"></use>
<use xlink:href="#E1-MJMATHI-61" x="389" y="0"></use>
<use xlink:href="#E1-MJMAIN-2B" x="1141" y="0"></use>
<use xlink:href="#E1-MJMATHI-62" x="2141" y="0"></use>
<use xlink:href="#E1-MJMAIN-29" x="2571" y="0"></use>
</g>
</svg>
to
\left(a+b\right)
The SVG is self generated so I would like have a map that that identifies with each SVG symbol (or group of symbols) a character in the string.
I thought of something like class annotation.
Your question indicates that you are looking to reconstruct TeX input from MathJax output, in which case the answer is "no".
On the one hand, MathJax converts input into (essentially) MathML in its internal data structure and renders that; cf. http://docs.mathjax.org/en/latest/advanced/model.html#the-components-of-mathjax. While you can reconstruct that MathML in many cases, you can't reconstruct the original TeX from it (for SVG, the default configuration makes it even harder).
On the other hand, even TeX-like rendering tools (like MathJax's predecessor jsMath) will have to resolve macros down to a TeX-like internal format (TeX lists basically) in which case you could only regenerate some very basic layout instructions (because real TeX/LaTeX is a programming language for print layout).
Of course, MathJax provides APIs to retrieve the original input from a given element and, in fact, stores it in the DOM in a custom script tag right after the SVG; so if that's what you're after it's much simpler.
Finally, if all you want to know is what Unicode point a certain SVG path represents, then the href of the <use> elements is what you're after, e.g., #E1-MJMAIN-28 matches u+0028.