Comma vs space in SVG polygon - svg

I noticed that Adobe illustrator will output something like this as an SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 521.92 138"><defs><style>.a{fill:#0e0e0e;}.b{fill:#535353;}</style></defs><title>macys_john</title>
<path class="a" d="M319.2,48.7a42.9,42.9,0,1,0,0,31.6v24.4h3.1V23.6h-3.1V48.7Zm-11.7,44a39.83,39.83,0,1,1,11.7-28.2A40.26,40.26,0,0,1,307.5,92.7Z"/>
<path class="a" d="M200.2,21.5c-12.2,0-20.3,5.6-25.1,12.3a37.57,37.57,0,0,0-4.7,9.1,29.89,29.89,0,0,0-5.2-10.4c-4.7-6.2-12.7-11-24.8-11s-20.3,5.6-25.1,12.3a40.48,40.48,0,0,0-3.6,6.3V23.6h-3.1v81.2h3.1V53.4a33.76,33.76,0,0,1,6.1-17.8c4.4-6.1,11.4-11,22.6-11s18.1,4.4,22.3,9.8a28.9,28.9,0,0,1,5.7,16.8v53.9h3.1V52.3a33.39,33.39,0,0,1,6-16.6c4.4-6.1,11.4-11,22.6-11s18.1,4.4,22.3,9.8a28.9,28.9,0,0,1,5.7,16.8v53.9h3.1V51.3a31.4,31.4,0,0,0-6.4-18.7C220.3,26.3,212.3,21.4,200.2,21.5Z"/>
<polygon class="a" points="476.4 23.4 473 23.4 439.7 100.6 408.3 23.4 405 23.4 438 104.6 423.6 138 427 138 476.4 23.4"/>
<path class="a" d="M518.6,70.6c-3.3-4.5-9.3-7.8-20.3-10.7-9.1-2.4-13.6-6.1-16-9.4a12,12,0,0,1-2.6-7.1V43h0V41.9a19.9,19.9,0,0,1,2.7-10.1c2.4-3.8,6.7-7.2,15.6-7.3,9.4,0,13.8,3.6,16.3,7.5a18.22,18.22,0,0,1,2.6,9.5v0.3L520,42V41.5a21.87,21.87,0,0,0-3.1-11.1c-2.9-4.7-8.7-9-18.9-9-9.7,0-15.4,4.1-18.3,8.7a22.79,22.79,0,0,0-3.2,11.8v1.4a15.17,15.17,0,0,0,3.2,9c2.8,3.9,8.1,8,17.7,10.5,10.8,2.9,16.1,6,18.6,9.6s2.9,7.9,2.8,14a17,17,0,0,1-6,12.5,22.32,22.32,0,0,1-15,5.6,23,23,0,0,1-14.3-5.1c-4.1-3.4-6.9-8.6-6.9-16h-3.1c0,8.2,3.3,14.4,8.1,18.4a25.27,25.27,0,0,0,16.3,5.8c13.4,0,24-9.9,24-21.1C522,80.4,521.9,75.2,518.6,70.6Z"/>
<polygon class="b" points="56.6 52.5 45.8 19.3 35 52.5 0 52.5 28.3 73.1 17.5 106.3 45.8 85.8 74 106.3 63.2 73.1 91.5 52.5 56.6 52.5"/>
<polygon class="a" points="475.4 16.1 480.6 12.3 485.9 16.1 483.9 10 489.1 6.2 482.6 6.2 480.6 0 478.6 6.2 472.2 6.2 477.4 10 475.4 16.1"/>
<path class="a" d="M368.7,24.7a39.84,39.84,0,0,1,28.2,11.7,38.91,38.91,0,0,1,8.6,12.9h3.3a42.93,42.93,0,1,0-.1,30.8h-3.3A39.9,39.9,0,1,1,368.7,24.7Z"/></svg>
but I dont see where in the w3c spec how some of the coordinate points can be expressed with space and not a comma. My question specifically is
Where in the/a spec does it claim this is proper?
Is there a difference between a space and comma for a point in terms of compatibility with viewers/browsers etc...


The grammar for polyline/polygon points attribute is here
The grammar for paths d attribute is here
In either case they both basically say that at most one comma is allowed provided that on both the left and the right of the comma you have a number so 31, 3 is valid but M, 5, 7 is not.
Firefox adheres closely to the specification, some other UAs may be more lenient in allowing extraneous invalid commas where they should not but all UAs support commas where they are valid.

Related

How do I fill in holes in svg text?

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>

Make half outline in the svg

I have an SVG which looks like the image below:
Code for SVG is below:
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="75"
height="61"
viewBox="0 0 75 61"
>
<path
d="M75.2 0v61H0V0c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1h-.1z"
fill="red"
/>
</svg>
I want to have an outline of black at only the half circular part of the svg, I am new to svg, so I am not able to do it. Please help.
NOTE: ignore the black outline at the top and bottom, that is not the part of svg, it comes because I have taken screenshot of my application. Only the red part is svg

For this you may use a different path whose's d attribute is a part of the previous path d attribute.
This is the d attribute you have:
d="M75.2 0v61H0V0
c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33
c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1
h-.1z"
For the new d attribute you remove M75.2 0v61H0V0. This is drawing part of the lines and ends in the point 0,0. You will use this point as a starting point: M0,0 Next you are using the bézier curves c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33 c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1 without the part that is closing the path.
This new path have fill="none" and the stroke of the color and width you like.
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="75"
height="61"
viewBox="0 0 75 61"
>
<path
d="M75.2 0v61H0V0
c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33
c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1
h-.1z"
fill="red"
/>
<path
d="M0,0
c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33
c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1" fill="none" stroke="black" stroke-width="3"/>
</svg>

Alternatively you could have used the exact same path, but used s dash pattern to stroke the correct section.
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="75"
height="61"
viewBox="0 0 75 61"
>
<path
d="M75.2 0v61H0V0c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1h-.1z"
fill="red"
/>
<path
d="M75.2 0v61H0V0c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1h-.1z"
fill="none" stroke="black" stroke-width="3"
stroke-dasharray="0 197 109 100"
/>
</svg>

SVG path 'fill' is coloring more than expected

I've got a shape that I've defined as an SVG path, and I'd like to fill it with a solid color. The path itself looks correct, and a stroke follows the shape I want. However, when I change the fill property from none to a color, the color overflows the curve I've defined and creates a rectangle shape plus a blob.
In these examples, I'm using an inline SVG style attribute, but I get the same result using CSS styles to fill the <path>.
<p>Path with stroke looks correct:</p>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="210" height="297" viewBox="0 0 210 297" version="1.1">
<path
style="fill:none;stroke-width:0.3;stroke:#000"
d="m47.6 69.5c0 22.9 0 45.9 0 68.8 37 0 74.1 0 111.1 0 0-22.9 0-45.9 0-68.8m-111.1 0c7.5-9.2 17.7-17.8 30-18.8 11.1-0.8 20.6 7.2 26.4 15.9 5.6 9 12.6 18.9 23.6 21.3 11.1 2.1 21-5.6 27.7-13.7 1.3-1.5 2.5-3.1 3.5-4.7"/>
</svg>
<p>But 'fill' covers more than it should:</p>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="210" height="297" viewBox="0 0 210 297" version="1.1">
<path
style="fill:blue;stroke-width:0.3;stroke:#000"
d="m47.6 69.5c0 22.9 0 45.9 0 68.8 37 0 74.1 0 111.1 0 0-22.9 0-45.9 0-68.8m-111.1 0c7.5-9.2 17.7-17.8 30-18.8 11.1-0.8 20.6 7.2 26.4 15.9 5.6 9 12.6 18.9 23.6 21.3 11.1 2.1 21-5.6 27.7-13.7 1.3-1.5 2.5-3.1 3.5-4.7"/>
</svg>
How can I fix this and make the fill color follow the curve on the top of the shape?

It's the way you are coding the path. If you look at the d attribute you have an m command (move to) in the middle. This means that you are not coding the path continuously. This is how I would do it:
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="210" height="297" viewBox="0 0 210 297" version="1.1">
<path
style="fill:red;stroke-width:0.3;stroke:#000"
d="M47.6,69.5
C55.1,60.3,65.3,51.7,77.6,50.7
C88.7,49.9,98.2,57.9,104,66.6
C109.6,75.6,116.6,85.5,127.6,87.9
C138.7,90,148.6,82.3,155.3,74.2
C156.6,72.7,157.8,71.1,158.8,69.5
V138.3H47.6z"/>
</svg>

Is there an option to make MathJax code recoverable from rendered 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.

SVG repeat object or symbol along path

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>

Resources