I'm new in the field of web designing. When I hear the inspect option in the browser, I think to change the youtube icon into mytube. Then, when I check the code of the icon I got a long data which I never see anywhere in my studying period. I attach that code with this. There are anyone who know to convert the letters y, o, u into m, y??
<svg>
<path d="M41.4697 18.1937C40.9053 17.8127 40.5031 17.22 40.2632 16.4157C40.0257 15.6114 39.9058 14.5437 39.9058 13.2078V11.3898C39.9058 10.0422 40.0422 8.95805 40.315 8.14196C40.5878 7.32588 41.0135 6.72851 41.592 6.35457C42.1706 5.98063 42.9302 5.79248 43.871 5.79248C44.7976 5.79248 45.5384 5.98298 46.0981 6.36398C46.6555 6.74497 47.0647 7.34234 47.3234 8.15137C47.5821 8.96275 47.7115 10.0422 47.7115 11.3898V13.2078C47.7115 14.5437 47.5845 15.6161 47.3329 16.4251C47.0812 17.2365 46.672 17.8292 46.1075 18.2031C45.5431 18.5771 44.7764 18.7652 43.8098 18.7652C42.8126 18.7675 42.0342 18.5747 41.4697 18.1937ZM44.6353 16.2323C44.7905 15.8231 44.8705 15.1575 44.8705 14.2309V10.3292C44.8705 9.43077 44.7929 8.77225 44.6353 8.35833C44.4777 7.94206 44.2026 7.7351 43.8074 7.7351C43.4265 7.7351 43.156 7.94206 43.0008 8.35833C42.8432 8.77461 42.7656 9.43077 42.7656 10.3292V14.2309C42.7656 15.1575 42.8408 15.8254 42.9914 16.2323C43.1419 16.6415 43.4123 16.8461 43.8074 16.8461C44.2026 16.8461 44.4777 16.6415 44.6353 16.2323Z" class="style-scope yt-icon"></path>
</svg>
The long string is a list of path commands. Each letter followed by numbers decides how the path is drawn. You picked the letter "o" in YouTube.
You can edit an SVG document or element in an desktop editor like Illustrator or InkScape. For editing paths I often use an online editor like SvgPathEditor.
In the below example I copied the code for the YouTube icon. Using SvgPathEditor I scaled up and rounded all numbers to make the sting shorter.
<svg viewBox="0 0 290 200" width="300">
<path d="M 280 31 C 276 19 267 9 254 6 C 232 0 143 0 143 0
C 143 0 54 0 31 6 C 19 9 9 19 6 31 C 0 54 0 100 0 100
C 0 100 0 146 6 169 C 9 181 19 191 31 194 C 54 200 143 200 143 200
C 143 200 232 200 254 194 C 267 191 276 181 280 169
C 286 146 286 100 286 100 C 286 100 286 54 280 31 Z" fill="#FF0000" />
<path d="M 114 143 L 188 100 L 114 57 V 143 Z" fill="white"/>
</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 drawn a representation of a cogwheel, and I am unable to fill the area I want filled. You can look at it here:
https://jsfiddle.net/9k451fb6/
I want the portion filled outside of the "hole" in the center, out to the cogs, whereas the "hole" gets filled, along with portions of the edges of the cogs (which in itself is curious to me, as the path is a single complete path with a single close (z) at the end, so why does it seem like each cog section has been closed?)
I have tried the options of fill-rule, nonzero and evenodd, but nothing changes.
This is the code I'm using. Note that it is drawn with a single path. However I have tried both this method, and closing the path (inserting a z) just before drawing the circle in the middle ("hole"):
<svg id="cogwheel_1" viewBox="0 0 300 300">
<path id="arc_path" stroke="#ff0000" stroke-width="2" fill="blue" fill-rule="evenodd" d="M 120 5 A 30 30 0 0 0 179 5 L 211 15 M 211 15 A 30 30 0 0 0 259 50 L 278 77 M 278 77 A 30 30 0 0 0 296 133 L 296 166 M 296 166 A 30 30 0 0 0 278 222 L 259 249 M 259 249 A 30 30 0 0 0 211 284 L 179 294 M 179 294 A 30 30 0 0 0 120 294 L 88 284 M 88 284 A 30 30 0 0 0 40 249 L 21 222 M 21 222 A 30 30 0 0 0 3 166 L 3 133 M 3 133 A 30 30 0 0 0 21 77 L 40 50 M 40 50 A 30 30 0 0 0 88 15 L 120 5 M 150 200 A 50 50 0 1 0 149 200 z"></path>
</svg>
I think this is what you want to achieve:
<svg id="cogwheel_1" viewBox="0 0 300 300">
<path id="arc_path" stroke="#ff0000" stroke-width="2" fill="blue" fill-rule="evenodd" d="M 120 5 A 30 30 0 0 0 179 5 L 211 15
A 30 30 0 0 0 259 50 L 278 77
A 30 30 0 0 0 296 133 L 296 166
A 30 30 0 0 0 278 222 L 259 249
A 30 30 0 0 0 211 284 L 179 294
A 30 30 0 0 0 120 294 L 88 284
A 30 30 0 0 0 40 249 L 21 222
A 30 30 0 0 0 3 166 L 3 133
A 30 30 0 0 0 21 77 L 40 50
A 30 30 0 0 0 88 15 L 120 5
M 150 200 A 50 50 0 1 0 149 200 z"></path>
</svg>
I've removed the M commands between cog's "teeths". By moving to a new point for every tooth you were forcing the filling of that fragment.
Any way it was already answered I'm going to leave here my approach. The problem with your svg was that every teeth corner of the cogwheel started a new sub path which nodes where at the same possition of the next teeth but were not connected with eachother. I just opened the file in Inkscape, selected all nodes and joined with the corresponding tool. Notice for the future: Any time you see a similar behaviour, mainly with svgs exported by Illustrator, CorellDraw and some online editors, you can be sure that some where in the path there are overlaped nodes but not conected.
Notice the difference between the two corners. The one above the two nodes are not connected.
So what you really got was a series of sub paths filled in blue as the arrow shows.
And this is the code just as SVGO cleaned it after Inkscape have saved it.
<svg id="cogwheel_1" viewBox="0 0 300 300">
<path id="arc_path" d="M 264.07142,186.6301 C 259.69918,200.23262 265.52681,215.03117 278,222 l -19,27 C 248.58911,238.28353 231.87939,236.86124 219.80706,245.66397 207.73474,254.46671 203.97989,270.81109 211,284 l -32,10 c -2.6299,-14.22385 -15.03507,-24.54564 -29.5,-24.54564 -14.46493,0 -26.8701,10.32179 -29.5,24.54564 L 88,284 C 95.020113,270.81109 91.265258,254.46671 79.192936,245.66397 67.120613,236.86124 50.410887,238.28353 40,249 L 21,222 C 33.47319,215.03117 39.300816,200.23262 34.928577,186.6301 30.556338,173.02758 17.197624,164.39607 3,166 l 0,-33 c 14.197624,1.60393 27.556338,-7.02758 31.928577,-20.6301 C 39.300816,98.767378 33.47319,83.968835 21,77 L 40,50 C 50.410887,60.716466 67.120613,62.138761 79.192936,53.336026 91.265258,44.533291 95.020113,28.188906 88,15 L 120,5 c 2.6299,14.223853 15.03507,24.545641 29.5,24.545641 14.46493,0 26.8701,-10.321788 29.5,-24.545641 l 32,10 c -7.02011,13.188906 -3.26526,29.533291 8.80706,38.336026 C 231.87939,62.138761 248.58911,60.716466 259,50 l 19,27 C 265.52681,83.968835 259.69918,98.767378 264.07142,112.3699 268.44366,125.97242 281.80238,134.60393 296,133 l 0,33 c -14.19762,-1.60393 -27.55634,7.02758 -31.92858,20.6301 z M 150,200 c 27.51544,-0.27517 49.63706,-22.73389 49.4979,-50.23579 -0.13917,-27.5005 -22.48529,-49.69493 -49.9979,-49.69493 -27.51261,0 -49.858733,22.19443 -49.997895,49.69493 C 99.362936,177.26611 121.48456,199.72483 149,200 Z" style="fill:#0000ff;fill-rule:evenodd;stroke:#ff0000;stroke-width:2"/>
</svg>
And, as a final advice, as I always recommend, if svg was created for the web, and Inkscape produces native svg files ready for the web, why people is still struggling with the awful overcomplicated unhuman svg files produced by propietary software?
I am trying to get an svg path to be 'clickable' when put into an file rather than put in-line in the document.
Basically I just want to be able to click on the filled elements of an image, not any empty areas.
I have converted my PNG image to svg and got this working, so that when I click on the filled areas the code executes as I need to, but not when clicking on any empty areas.
To do this, I have only had to put in a 'class' to the 'path' tag to make the filled areas interactive via the code.
However, if I now put this svg code into a file and load it into an element, as seems to be the way to do it from what I've read, then it won't working.
I have already added the jquery add on files below, and while these have allowed other svg functions to work it hasn't allowed for this one.
<link rel="stylesheet" type="text/css" href="assets/js/jquery.svg.css">
I am unable to interact with the internal svg path within the file even with some simple css. if I put the css into the file directly in a 'style' tag then the css is applied.
I am not sure where to go with this. I have several thousand images that need to have this functionality and each one has a lot of coding to create the path for the svg image so I really don't want to have to put all of these into the html document as it will be a nightmare to deal with.
I've seen people acheieving similar interactions but as yet I've not found one applying jquery or java or even a solution that will get the ability to vary css working.
here is the code for the svg, which is just using a test image rather than one of my own but works the same.
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0
300.000000 300.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,300.000000) scale(0.050000,-0.050000)" fill="#00000" stroke="none">
<!-- The <a> tag we've added -->
<path class="imageSelector" style="cursor: pointer;" d="M4390 5952 c-113 -53 -289 -221 -427
-409 -84 -114 -98 -125 -153
-117 -171 27 -523 -80 -714 -217 l-98 -71 -97 71 c-186 137 -427 215 -661 215
l-115 0 -91 123 c-228 310 -551 543 -524 378 5 -30 19 -167 31 -305 12 -137
30 -281 40 -318 17 -66 13 -74 -119 -213 -336 -354 -415 -830 -210 -1265 l50
-106 -38 -104 c-235 -632 -120 -1587 226 -1874 64 -53 11 -59 -607 -64 l-636
-6 -79 -55 c-242 -167 -208 -515 61 -637 75 -34 153 -37 1058 -38 l977 0 -13
-75 c-25 -132 -109 -254 -295 -425 -213 -197 -351 -454 -221 -414 553 173 689
197 799 139 298 -158 287 -155 466 -155 179 0 168 -3 466 155 110 58 246 34
799 -139 130 -40 -8 217 -221 414 -186 171 -270 293 -295 425 l-13 75 977 0
c905 1 983 4 1058 38 269 122 303 470 61 637 l-79 55 -636 6 c-618 5 -671 11
-607 64 346 287 461 1244 225 1877 l-39 107 51 103 c208 416 127 909 -208
1262 -135 141 -136 144 -120 222 10 43 27 178 39 299 13 121 27 258 32 305 5
47 7 85 5 85 -3 0 -50 -22 -105 -48z m-1960 -899 c250 -67 549 -348 550 -518
0 -19 9 -35 20 -35 11 0 20 16 20 35 1 170 300 451 550 518 734 196 1249 -740
706 -1280 -233 -231 -581 -286 -874 -138 -71 36 -130 63 -132 60 -2 -3 -61
-115 -132 -250 -70 -135 -132 -245 -138 -245 -6 0 -68 110 -138 245 -71 135
-130 247 -132 250 -2 3 -61 -24 -132 -60 -297 -151 -682 -79 -905 167 -500
553 23 1441 737 1251z m-55 -3239 c25 -23 45 -55 45 -72 0 -19 25 -1 61 43 78
95 190 105 270 26 47 -47 49 -60 49 -311 0 -251 -2 -264 -49 -311 -80 -79
-192 -69 -270 26 -40 49 -61 63 -61 41 0 -104 -198 -150 -294 -68 l-56 49 0
260 c0 246 3 262 47 310 75 79 175 82 258 7z m1146 -31 c36 -44 59 -60 59 -41
0 114 205 162 298 70 51 -52 52 -59 52 -314 l0 -261 -56 -49 c-93 -80 -294
-37 -294 63 0 16 -9 29 -20 29 -11 0 -20 -11 -20 -24 0 -108 -203 -155 -291
-67 -54 55 -75 504 -27 594 57 108 210 108 299 0z" />
<path d="M2090 4647 c-352 -186 -235 -697 160 -697 391 0 514 514 166 692 -91
46 -243 48 -326 5z" />
<path d="M3590 4647 c-352 -186 -235 -697 160 -697 391 0 514 514 166 692 -91
46 -243 48 -326 5z" />
</g>
</svg>
If I put this into the document, it works fine. If I load it from a file, the image renders but I can't interact with the class for the path
this is the code for the flie load option:
<object class="imageClass" type="image/svg+xml" data="ImageFile.svg"></object>
thanks for any help on this
Update:
I have tried several ways to get this to work looking at options online and the help from suggestions below but I haven't had any success in getting the svg to be clickable at all when loaded from a file.
The only way I have been able to even access the inner elements of the svg file is using the following method with jquery.svg:
(document).ready(function() {
$("#divforSVG").svg(
{
onLoad: function() { var svg = $("#divforSVG").svg('get');
svg.load('svgFile.svg', {addTo: true, changeSize: false});
},
settings: {}} );
$('#Button').click(function(e) {
var rect = $('#ImagePath');
rect.css('fill','green');
rect.attrib('fill','green');
});
});
This i found from the following link:
Modify a svg file using jQuery
This loads the svg file into an element, rather than placing the svg file within an object element in the html page, as seems to be the way suggested. This works, changing the colour by clicking on the button, and can apply this to any inner part of the svg file. However, I cannot find a way to bind a click event to the inner elements of the svg file.
The main method of accessing inner elements of the svg file using the object method, as set out in this link, I can't get to work at all to access any part of the svg element.
How to access SVG elements with Javascript
this seems to be the way to do it with normal javascript but I've not made any progress with it. If anyone has any suggestions on how I may be able to bind a click event using the jquery.svg method as set out above, or how to get the object element method working, I'd greatly appreciate it
If you reference a file in another file, that file is no longer part of the document object model, and Javascript can no longer interact with it. The file has its own, separate DOM.
You were right to use an <object> tag, because that gives you the possibility to bridge the gap between the two DOMs (something that would be impossible with an <img> tag). Basically, with
var childDocument = $('object.imageClass').prop('contentDocument')
you get access to the document interface of the SVG content - but only provided the linked file fullfills the same-origin policy.
Note carefully the role that jQuery plays in this. jQuery has been loaded into the parent document and is not present in the child document. So instead of selecting the SVG root element in the child document with $('svg'), you must use $(childDocument).find('svg'). You cannot traverse from one document to the other with .parent(), .children() or other traversal functions. You cannot delegate events from the child document to elements in the parent document.
The jquery-svg plugin would have to work with
var svg = $(childDocument).find('svg').svg('get')
I have made my first experience with the tag <path> on svg and was wondering if there was a better way to do it. It came out as I wanted, only black in those zones and the rest as transparent (not just white).
My code:
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M200 10 L10 10 L30 30 L50 30 L50 35 L35 35 L35 70 L30 70 L30 30 L10 10 L10 160 L50 120 L50 160 L80 160 L160 80 L160 50 L130 50 L50 130 L50 120 L160 10 L170 10 L150 30 L180 30 L180 60 L200 40 L200 50 L50 200 L40 200 L60 180 L30 180 L30 150 L10 170 L10 200 L200 200 L180 180 L160 180 L160 175 L175 175 L175 140 L180 140 L180 180 L200 200 Z" />
</svg>
Visual path (start on the green ball, follow the orange line untill the red ball, the blue line is isn't needed with the Z = closepath):
I used only Ls as I yet have to learn how the others work. M to start and Z to end, I think.
My way of learning is by testing a lot and read less. So, any suggestions for someone starting to learn svg that aren't just links to begginers's guides or tutorials? This will probably gets some downvotes.
Assuming you want the "L" shapes to be holes - which is what it looks like you want - then you should be using subpaths. Ie. use the "move" path command ("M"). You shouldn't use connecting lines to jump from one shape to another, like you are currently doing, for two reasons:
Depending on the renderer, those zero-width slivers may sometimes be visible. Especially for some colour combinations.
You can't use a stroke colour on the shape if you want to. For example:
<svg width="200" height="200">
<path d="M200 10 L10 10 L30 30 L50 30 L50 35 L35 35 L35 70 L30 70 L30 30 L10 10 L10 160 L50 120 L50 160 L80 160 L160 80 L160 50 L130 50 L50 130 L50 120 L160 10 L170 10 L150 30 L180 30 L180 60 L200 40 L200 50 L50 200 L40 200 L60 180 L30 180 L30 150 L10 170 L10 200 L200 200 L180 180 L160 180 L160 175 L175 175 L175 140 L180 140 L180 180 L200 200 Z" stroke="green" stroke-width="4"/>
</svg>
Here's how you should be doing it:
Create closed paths for each of the individual shapes in your path.
// top left triangle
M 10 10 L 10 160 L 160 10 Z
// top left 'L'
M 30 30 L 50 30 L50 35 L35 35 L35 70 L30 70 Z
// central shape
M 50 130 L 50 160 L 80 160 L 160 80 L 160 50 L 130 50 L 50 130 Z
// top right chevron
M 170 10 L 150 30 L 180 30 L 180 60 L 200 40 L 200 10 Z
// bottom right triangle
M 200 50 L 50 200 L 200 200 Z
// bottom right 'L'
M 40 200 L 60 180 L 30 180 L 30 150 L 10 170 L 10 200 Z
// bottom left chevron
M 180 180 L 160 180 L 160 175 L 175 175 L 175 140 L 180 140 Z
Merge these all into a single path and you get the result you want. See below.
Where paths overlap/intersect they usually make holes. Sometimes they don't, but if you are consistent about the direction you use to define your paths (clockwise or anticlockwise), they will.
<svg width="220" height="220">
<path d="M 10 10 L 10 160 L 160 10 Z
M 30 30 L 50 30 L50 35 L35 35 L35 70 L30 70 Z
M 50 130 L 50 160 L 80 160 L 160 80 L 160 50 L 130 50 L 50 130 Z
M 170 10 L 150 30 L 180 30 L 180 60 L 200 40 L 200 10 Z
M 200 50 L 50 200 L 200 200 Z
M 40 200 L 60 180 L 30 180 L 30 150 L 10 170 L 10 200 Z
M 180 180 L 160 180 L 160 175 L 175 175 L 175 140 L 180 140 Z" stroke="green" stroke-width="4"/>
</svg>
Svg. How i would do it:
Here is how fill rule works: MDN fill-rule
In after though i would use MDN polygon
<svg viewBox="0 0 100 100">
<!--Middle element -->
<path d="M25,75, 25,62.5 62.5,25 75,25 75,37.5 37.5,75 25,75 Z" />
<!--Corners -->
<path d="M 100,0 100,12.5 87.5,25 87.5,12.5 75,12.5 87.5,0Z" />
<!-- Look how all the numbers are opposite of the ones above!-->
<path d="M 0,100 12.5,100 25,87.5 12.5,87.5 12.5,75 0,87.5Z" />
<!-- shape within a shape with fill rule-->
<path fill-rule="evenodd" d="M 0,0 75,0 0,75
M12.5,12.5 20,12.5 20,15 15,15 15,30 12.5,30" />
<path fill-rule="evenodd" d="M 100,100 25,100 100,25
M87.5,87.5 80,87.5 80,85 85,85 85,70 87.5,70" />
</svg>
(Personal opinion) By setting the shapes in different paths its easier to read the code.
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.