How to fill in SVG paths? - svg

I created this svg: https://svgshare.com/i/5z1.svg
If you view source you can see that each path looks like
<path stroke="black" stroke-width="10" fill="#666" d="M318237,48823 L321987,48823 M321987,48823 L321987,47323 M321987,47323 L318237,47323 M318237,47323 L318237,48823 Z" />
However, the svg still has just thin lines and each rectangular path remains unfilled. Is there a way to do this without converting the path into rectangles?


I believe that your paths are not closed and therefore they cannot be filled.
Let's see one path definition:
M318237,48823 L321987,48823 M321987,48823 L321987,47323 M321987,47323 L318237,47323 M318237,47323 L318237,48823 Z
Every M means moving to a point, L means drawing a line to a specified point. Z means closing the current subpath.
Anything that starts with M starts a new subpath. For example:
M318237,48823 L321987,48823
is a subpath which draws a line
M321987,48823 L321987,47323
Draws another line but without connecting it to the previous subpath, creating an unclosed path. It should be:
M318237,48823 L321987,48823 L321987,47323
and so on.
Full closed path:
<path stroke="black" stroke-width="10" fill="#666" d="M318237,48823 L321987,48823 L321987,47323 L318237,47323 L318237,48823 Z" />
The last line L318237,48823 can be omitted because that's what Z does anyway.
The definition could be also simplified using H and V commands since you have only straight horizontal/vertical lines.

Related

Is there a way to make a map element(country/region) fly into its correct location on the map using svg animation?

I am just starting to play around with SVG animations. is it possible to make a country follow a random path to its correct place on the map? The equivalent of puzzle pieces assembling themselves when the box is opened is the best I can think of. Is this even possible with SVG animations or will something else be required?
This is what I have right now
<svg xmlns:svg="http://www.w3.org/2000/svg" viewBox="500 180 2500 1500">
<g>
<path id="US-WA" d="m 1204.9427,925.58655 c -1.3898,1.54162 -3.5681,6.4786 -0.2995,5.99944 -2.5653,2.58922 -3.3814,8.57974 -8.3992,5.99945 -1.6219,3.81537 1.3975,1.05569 2.0998,3.29967 0.4051,1.29541 -0.1592,2.49675 -0.5999,3.59966 -0.574,1.43862 -1.0531,2.67841 -0.5999,4.19962 0.9522,3.19931 -7.9766,5.68493 -8.3992,9.89904 -0.3437,3.41803 -2.4129,5.35128 -4.7996,6.89936 -1.6428,1.06557 -3.5355,1.94896 -5.0995,2.99971 -1.0386,0.69641 -3.9323,3.80031 -5.3995,2.99974 -2.3214,-1.26485 -4.2692,-0.25119 -5.0995,2.09979 1.0922,-2.53862 0.4348,-2.72427 -1.7999,-0.89992 2.8988,-1.68447 2.8988,-2.18139 0,-1.49986 3.4375,-0.54169 5.4851,-4.00727 8.6992,-5.09951 -1.4791,0.92554 -2.2605,2.696 -2.0998,4.49958 1.1896,-1.31713 2.6821,-2.51823 4.1996,-3.59966 3.3001,-1.51067 7.1003,-7.47473 3.2997,-5.39949 1.1845,-3.59217 9.6433,-5.94207 8.3992,-9.29912 -0.7286,0.44537 -1.4265,0.73373 -2.0998,1.19988 0.5808,-0.54475 1.0436,-1.2686 1.1999,-1.79983 0.5241,-1.76484 -0.3734,-3.74478 0.6,-5.3995 -1.6785,0.33627 -2.8771,1.62713 -3.2997,3.2997 -0.03,-3.66061 -9.5411,-2.9717 -13.1988,-3.59966 -6.0712,-1.04164 -10.1546,-4.19955 -15.8985,-5.69945 -3.6011,-0.94045 -7.7344,10.52732 -7.4993,14.09865 0.4944,7.49384 -4.7149,14.61007 -6.8993,21.59794 0.5058,-0.7678 1.1629,-1.73608 1.7998,-2.39975 1.0981,1.3452 2.7199,2.51886 4.4996,2.39975 -3.8928,1.13991 -8.3028,1.07697 -8.9992,5.99945 1.7737,-0.30948 3.4305,0.0307 4.7996,1.19988 -4.3035,-1.98209 -5.6594,6.11962 -9.2991,6.89936 0.7055,-1.47317 1.2194,-2.97283 1.7998,-4.49958 -0.289,0.51433 -1.36,2.46258 -2.0998,4.19962 -0.9513,2.23333 -1.3747,4.25619 0.8994,3.89962 2.6815,-0.41969 3.9566,-1.05119 6.5994,0.29996 0.1604,0.0815 0.4166,0.19315 0.5999,0.29997 0.8697,0.50617 1.9523,1.19458 2.9997,1.49987 0.5194,-0.12589 1.4274,0.31936 1.7999,0 -0.3763,0.16368 -0.7881,0.34662 -1.1999,0.29996 3.0295,3.11021 2.4204,6.05171 1.7998,8.39921 -0.621,2.3475 -1.3217,4.091 1.1999,5.3995 2.5216,1.3085 5.1278,-0.2432 8.0992,-2.3998 2.9714,-2.1566 6.495,-4.746 10.4991,-5.0995 8.0082,-0.7071 17.5494,6.3653 27.5974,5.9994 10.0479,-0.3658 14.9111,-7.1919 30.597,-9.29907 7.843,-1.05361 20.1041,-3.77898 32.097,-4.79957 5.7862,-0.49243 11.3081,-0.53657 16.4985,0.29999 0.048,-0.37868 0.261,-0.83522 0.2994,-1.19991 0.5044,-4.62142 0.3005,-8.09921 0.3005,-8.09921 l 34.1968,-59.69438 z m -8.6991,14.69864 c -4.3838,2.4582 -7.1019,6.99959 -3.8997,11.69887 2.631,-0.41669 3.1785,-3.76633 0,-3.59966 1.4791,-1.87195 0,-4.22926 2.0998,-5.69946 1.2679,-0.88982 3.6689,-0.20029 1.7999,-2.39975 z m -14.6986,15.29853 c 1.1968,-0.62576 1.5042,-0.37032 -0.8995,2.09979 -0.8773,0.49186 -1.6983,1.11039 -2.6997,1.49987 -2.5356,0.99105 -6.2994,3.05843 -6.2994,6.29941 -0.7756,0.0354 -1.6623,-0.25208 -2.3998,-0.89991 2.8184,-2.25589 5.7052,-4.56967 8.6992,-6.59938 0.4713,-0.32138 2.4028,-1.77405 3.5996,-2.39978 z" />
<animate attributeType="XML" attributeName="x" from="600" to="1000"
dur="10s" repeatCount="indefinite" />
</g>
</svg>
Any help or pointers is greatly appreciated. Thanks

Path elements don't have an x attribute. You can do the same thing with a transform animation though.
Additionally an animate element must either be the child of the path or point to the path vi the path's id. Last I checked Chrome's accessing of elements with id values containing a - sign from SMIL was buggy so given that's what you have as an id I've made the animateTransform a child of your path.
Note that SMIL can't do random on its own, you could create something that looks like a random walk but it's going to be the same each time basically. You could create random SMIL animations via javascript.
<svg xmlns:svg="http://www.w3.org/2000/svg" viewBox="500 180 2500 1500">
<g>
<path id="US-WA" d="m 1204.9427,925.58655 c -1.3898,1.54162 -3.5681,6.4786 -0.2995,5.99944 -2.5653,2.58922 -3.3814,8.57974 -8.3992,5.99945 -1.6219,3.81537 1.3975,1.05569 2.0998,3.29967 0.4051,1.29541 -0.1592,2.49675 -0.5999,3.59966 -0.574,1.43862 -1.0531,2.67841 -0.5999,4.19962 0.9522,3.19931 -7.9766,5.68493 -8.3992,9.89904 -0.3437,3.41803 -2.4129,5.35128 -4.7996,6.89936 -1.6428,1.06557 -3.5355,1.94896 -5.0995,2.99971 -1.0386,0.69641 -3.9323,3.80031 -5.3995,2.99974 -2.3214,-1.26485 -4.2692,-0.25119 -5.0995,2.09979 1.0922,-2.53862 0.4348,-2.72427 -1.7999,-0.89992 2.8988,-1.68447 2.8988,-2.18139 0,-1.49986 3.4375,-0.54169 5.4851,-4.00727 8.6992,-5.09951 -1.4791,0.92554 -2.2605,2.696 -2.0998,4.49958 1.1896,-1.31713 2.6821,-2.51823 4.1996,-3.59966 3.3001,-1.51067 7.1003,-7.47473 3.2997,-5.39949 1.1845,-3.59217 9.6433,-5.94207 8.3992,-9.29912 -0.7286,0.44537 -1.4265,0.73373 -2.0998,1.19988 0.5808,-0.54475 1.0436,-1.2686 1.1999,-1.79983 0.5241,-1.76484 -0.3734,-3.74478 0.6,-5.3995 -1.6785,0.33627 -2.8771,1.62713 -3.2997,3.2997 -0.03,-3.66061 -9.5411,-2.9717 -13.1988,-3.59966 -6.0712,-1.04164 -10.1546,-4.19955 -15.8985,-5.69945 -3.6011,-0.94045 -7.7344,10.52732 -7.4993,14.09865 0.4944,7.49384 -4.7149,14.61007 -6.8993,21.59794 0.5058,-0.7678 1.1629,-1.73608 1.7998,-2.39975 1.0981,1.3452 2.7199,2.51886 4.4996,2.39975 -3.8928,1.13991 -8.3028,1.07697 -8.9992,5.99945 1.7737,-0.30948 3.4305,0.0307 4.7996,1.19988 -4.3035,-1.98209 -5.6594,6.11962 -9.2991,6.89936 0.7055,-1.47317 1.2194,-2.97283 1.7998,-4.49958 -0.289,0.51433 -1.36,2.46258 -2.0998,4.19962 -0.9513,2.23333 -1.3747,4.25619 0.8994,3.89962 2.6815,-0.41969 3.9566,-1.05119 6.5994,0.29996 0.1604,0.0815 0.4166,0.19315 0.5999,0.29997 0.8697,0.50617 1.9523,1.19458 2.9997,1.49987 0.5194,-0.12589 1.4274,0.31936 1.7999,0 -0.3763,0.16368 -0.7881,0.34662 -1.1999,0.29996 3.0295,3.11021 2.4204,6.05171 1.7998,8.39921 -0.621,2.3475 -1.3217,4.091 1.1999,5.3995 2.5216,1.3085 5.1278,-0.2432 8.0992,-2.3998 2.9714,-2.1566 6.495,-4.746 10.4991,-5.0995 8.0082,-0.7071 17.5494,6.3653 27.5974,5.9994 10.0479,-0.3658 14.9111,-7.1919 30.597,-9.29907 7.843,-1.05361 20.1041,-3.77898 32.097,-4.79957 5.7862,-0.49243 11.3081,-0.53657 16.4985,0.29999 0.048,-0.37868 0.261,-0.83522 0.2994,-1.19991 0.5044,-4.62142 0.3005,-8.09921 0.3005,-8.09921 l 34.1968,-59.69438 z m -8.6991,14.69864 c -4.3838,2.4582 -7.1019,6.99959 -3.8997,11.69887 2.631,-0.41669 3.1785,-3.76633 0,-3.59966 1.4791,-1.87195 0,-4.22926 2.0998,-5.69946 1.2679,-0.88982 3.6689,-0.20029 1.7999,-2.39975 z m -14.6986,15.29853 c 1.1968,-0.62576 1.5042,-0.37032 -0.8995,2.09979 -0.8773,0.49186 -1.6983,1.11039 -2.6997,1.49987 -2.5356,0.99105 -6.2994,3.05843 -6.2994,6.29941 -0.7756,0.0354 -1.6623,-0.25208 -2.3998,-0.89991 2.8184,-2.25589 5.7052,-4.56967 8.6992,-6.59938 0.4713,-0.32138 2.4028,-1.77405 3.5996,-2.39978 z" >
<animateTransform attributeName="transform" type = "translate" from="600" to="1000"
dur="10s" repeatCount="indefinite" />
</path>
</g>
</svg>

Showing an SVG that I have as a string

I have some code that outputs an SVG as string.
Eg
foo = """
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" height="100" width="200" style="fill: blue"/>
</svg>
"""
I would like to display it in the cell output as an image.
I've seen several libraries do this.
How is it done?

display(mimetype, x)
display has a form that takes a mime-type as the first argument.
IJulia uses this information to determine how to display that object
So the code to display your foo, is display("image/svg+xml", foo)
Which will draw a nice blue rectangle.

In the newer versions of julia the accepted answer is no longer true. See this discussion instead you must save the string to a file, then read it. Something like:
f = open("images/animage.svg", "r")
s = read(f) #Don't force Julia to read a "String"
close(f) #Don't forget to close your file!
#show typeof(s); flush(stdout) #FYI: So you can understand what type is read back
display(MIME("image/svg+xml"), s)
The above code was taken from this discussion

svg path inside rectangle overflow

I have a svg rectange transformed 90° with border only and fill: none.
I have also a path that fills the above rectangle. Note tha i dont want to use fill attribute so as to make the rectangle green. i would like another path fill it like it has background.
<svg height="100%" width="100%" id="svg-rect-rotated" x="-166px" y="-190px">
<rect id="rect" x="463.923" y="258.923" transform="matrix(0.7071 0.7071 -0.7071 0.7071 346.2503 -262.9221)" fill="#00ff87" stroke="none" stroke-width="6.522" width="55.154" height="55.154"/>
<path id="path" style="fill:none;stroke:#00ff87;stroke-width:4.4164;stroke-miterlimit:10;" d="M490.156,251.632L492.702 251.632 489.39 252.51 493.805 252.818 488.627 253.301 494.823 254.004 487.608 254.355 496.182 255.234 486.76 255.058 497.2 256.376 485.911 255.937 498.176 257.387 485.062 257.036 499.173 258.54 484.118 257.948 500.054 259.573 482.961 258.948 501.169 260.43 482.134 259.902 502.059 261.384 481.497 260.627 502.823 262.208 480.829 261.353 503.651 263.033 479.779 262.439 504.67 264.12 478.823 263.396 505.751 265.24 477.805 264.449 506.802 266.262 476.882 265.438 507.82 267.383 476.054 266.262 508.584 268.239 475.354 267.086 509.476 269.063 474.399 268.008 510.302 269.953 473.699 268.7 511.13 270.776 473.031 269.393 511.884 271.534 472.331 270.084 512.564 272.326 471.695 270.788 513.199 272.896 471.057 271.446 513.878 273.643 470.507 272.062 514.474 274.258 469.869 272.677 515.025 274.786 469.276 273.379 515.746 275.533 468.638 273.95 516.34 276.191 468.044 274.565 516.977 276.807 467.578 275.093 517.614 277.509 466.983 275.708 518.377 278.257 466.263 276.411 519.099 279.047 465.668 277.026 519.651 279.619 465.159 277.553 520.16 280.102 464.606 278.125 520.797 280.717 463.971 278.784 521.391 281.376 463.292 279.531 522.028 282.035 462.613 280.102 522.663 282.65 461.89 280.893 523.299 283.397 461.254 281.595 523.936 283.968 460.615 282.21 524.531 284.649 459.981 282.936 525.422 285.637 458.962 283.857 525.989 286.164 457.881 284.781 524.977 287.22 456.989 285.836 523.958 288.274 457.434 286.626 523.003 289.196 458.325 287.615 522.24 290.053 458.922 288.295 521.604 290.668 459.557 288.867 520.966 291.371 460.194 289.613 520.244 292.161 460.83 290.229 519.566 292.733 461.465 290.888 518.886 293.479 462.06 291.546 518.25 294.139 462.696 292.161 517.699 294.71 463.206 292.645 517.19 295.238 463.757 293.216 516.594 295.852 464.479 294.006 515.873 296.555 465.242 294.754 515.28 297.17 465.879 295.456 514.812 297.698 466.515 296.072 514.218 298.313 467.11 296.73 513.581 298.884 467.832 297.478 512.989 299.587 468.384 298.005 512.35 300.201 468.976 298.62 511.798 300.817 469.656 299.367 511.162 301.477 470.293 299.938 510.527 302.179 470.973 300.729 509.825 302.871 471.726 301.487 509.157 303.563 472.552 302.311 508.457 304.254 473.381 303.2 507.502 305.178 474.272 304.024 506.802 306.001 475.036 304.881 505.974 306.826 476.054 306.001 505.051 307.814 477.105 307.023 504.032 308.868 478.187 308.143 503.077 309.824 479.206 309.23 502.027 310.911 480.033 310.055 501.359 311.636 480.797 310.878 500.722 312.361 481.688 311.834 499.926 313.218 482.802 312.69 498.739 314.316 483.683 313.724 497.795 315.228 484.68 314.877 496.945 316.326 485.656 315.887 496.096 317.206 486.675 317.029 495.247 317.908 488.033 318.259 494.229 318.962 489.052 319.445 493.466 319.752 490.155 320.632 492.701 320.632 " />
</svg>
if you see the jsfiddle my path overflow the rectangle. is there any way to prevent this from happening using css? or i have to create tha path again?

Either use CSS transform or SVG presentation attributes to scale/rotate/translate to adjust your elements.
I removed the matrix transformation from the rect and instead placed both rect and path inside a g element which gets a rotation transform. then the path itself gets scaled down and translated inside the rect. i think this covers what you were going for. play around some more with the code to get it where you want...
<svg viewBox="0 0 650 650">
<g id="g" transform="rotate(30)">
<rect id="rect" x="463.923" y="258.923" fill="none" stroke="#00ff87" stroke-width="6.522" width="55.154" height="55.154"></rect>
<path transform="scale(.8) translate(125,70)" id="path" style="fill:none;stroke:#00ff87;stroke-width:4.4164;stroke-miterlimit:10;" d="M490.156,251.632L492.702 251.632 489.39 252.51 493.805 252.818 488.627 253.301 494.823 254.004 487.608 254.355 496.182 255.234 486.76 255.058 497.2 256.376 485.911 255.937 498.176 257.387 485.062 257.036 499.173 258.54 484.118 257.948 500.054 259.573 482.961 258.948 501.169 260.43 482.134 259.902 502.059 261.384 481.497 260.627 502.823 262.208 480.829 261.353 503.651 263.033 479.779 262.439 504.67 264.12 478.823 263.396 505.751 265.24 477.805 264.449 506.802 266.262 476.882 265.438 507.82 267.383 476.054 266.262 508.584 268.239 475.354 267.086 509.476 269.063 474.399 268.008 510.302 269.953 473.699 268.7 511.13 270.776 473.031 269.393 511.884 271.534 472.331 270.084 512.564 272.326 471.695 270.788 513.199 272.896 471.057 271.446 513.878 273.643 470.507 272.062 514.474 274.258 469.869 272.677 515.025 274.786 469.276 273.379 515.746 275.533 468.638 273.95 516.34 276.191 468.044 274.565 516.977 276.807 467.578 275.093 517.614 277.509 466.983 275.708 518.377 278.257 466.263 276.411 519.099 279.047 465.668 277.026 519.651 279.619 465.159 277.553 520.16 280.102 464.606 278.125 520.797 280.717 463.971 278.784 521.391 281.376 463.292 279.531 522.028 282.035 462.613 280.102 522.663 282.65 461.89 280.893 523.299 283.397 461.254 281.595 523.936 283.968 460.615 282.21 524.531 284.649 459.981 282.936 525.422 285.637 458.962 283.857 525.989 286.164 457.881 284.781 524.977 287.22 456.989 285.836 523.958 288.274 457.434 286.626 523.003 289.196 458.325 287.615 522.24 290.053 458.922 288.295 521.604 290.668 459.557 288.867 520.966 291.371 460.194 289.613 520.244 292.161 460.83 290.229 519.566 292.733 461.465 290.888 518.886 293.479 462.06 291.546 518.25 294.139 462.696 292.161 517.699 294.71 463.206 292.645 517.19 295.238 463.757 293.216 516.594 295.852 464.479 294.006 515.873 296.555 465.242 294.754 515.28 297.17 465.879 295.456 514.812 297.698 466.515 296.072 514.218 298.313 467.11 296.73 513.581 298.884 467.832 297.478 512.989 299.587 468.384 298.005 512.35 300.201 468.976 298.62 511.798 300.817 469.656 299.367 511.162 301.477 470.293 299.938 510.527 302.179 470.973 300.729 509.825 302.871 471.726 301.487 509.157 303.563 472.552 302.311 508.457 304.254 473.381 303.2 507.502 305.178 474.272 304.024 506.802 306.001 475.036 304.881 505.974 306.826 476.054 306.001 505.051 307.814 477.105 307.023 504.032 308.868 478.187 308.143 503.077 309.824 479.206 309.23 502.027 310.911 480.033 310.055 501.359 311.636 480.797 310.878 500.722 312.361 481.688 311.834 499.926 313.218 482.802 312.69 498.739 314.316 483.683 313.724 497.795 315.228 484.68 314.877 496.945 316.326 485.656 315.887 496.096 317.206 486.675 317.029 495.247 317.908 488.033 318.259 494.229 318.962 489.052 319.445 493.466 319.752 490.155 320.632 492.701 320.632 " style="-webkit-transition: stroke-dashoffset 1s ease-in-out; transition: stroke-dashoffset 1s ease-in-out; stroke-dasharray: 988.003967285156px, 988.003967285156px; stroke-dashoffset: 0px;" />
</g>
</svg>
Hope this helps!

Convert SVG Image to Path - to use with skrollr

I recently came across Skrollr, an interesting library to achieve a parallax effect. I am using it to control some opacities and would be ideal to make a 'path' ( provided as an SVG image - including coloring and stroke width etc - from the designers ).
I am hoping to animate a SVG image (path) as the user scrolls down as though the line is drawn. This is a nice example from skrollr which uses a similar effect as expected. The used example has a 'path', but what I have is an svg image - which I notice to have many paths. Skrollr seems to be needing an inline SVG path as it seems.
How can I get a similar effect as in the example specified. To get it, I will have to convert the given svg file in to some thing similar to ( from example ):-
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="900px" height="1200px">
<path
style="fill:none;stroke:#333333;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:6000;stroke-dashoffset:0"
data-0="stroke-dashoffset:6000;" data-end="stroke-dashoffset:0;"
d="m 199.16266,227.29566 c 0,0 -35.71429,-184.285714 37.14286,-210.000004 72.85714,-25.7142792 95.40137,3.16127 134.28572,42.85715 C 462.01038,153.47988 433.14019,231.62843 612.01981,188.72422 740.78435,157.8401 648.46996,-124.25341 423.44838,73.009946 397.57737,95.689556 342.01981,227.29566 322.01981,268.72423 c -20,41.42857 -15.71429,142.85714 64.28571,222.85714 80,80 143.73919,-10.78923 207.14286,17.14286 89.11717,39.26002 175.71428,70 214.28571,198.57143 38.57143,128.57142 -224.28571,45.71428 -311.42857,50 -87.14286,4.28571 -174.7636,-13.7114 -273.33504,69.14573 -98.57143,82.85724 -123.427376,147.71354 -133.893126,125.93684 -13.988987,-29.1077 -55.031934,-20.6196 -72.436974,2.587 -35.52138,47.36187 48.898892,49.25187 59.501803,81.06057 11.228801,33.6863 -55.491303,91.6685 -70.7122836,61.2265 -14.3563298,-28.7127 55.6559746,-11.2104 68.9875946,-11.2104 59.313946,0 106.207266,-47.3062 135.388156,-93.99577 9.07249,-14.516 16.34065,-34.5597 6.03641,-50.0161 -24.31744,-36.4761 -61.10674,32.1704 -64.67586,50.0161 -1.78804,8.94027 -18.73345,93.13327 -18.9716,93.13327 -15.39093,0 28.03002,-116.70147 77.61105,-83.6473 22.80402,15.2025 -31.82409,33.8676 -43.11725,31.0443 -2.54514,-0.6362 -14.1213,-7.4374 -16.38456,-5.174 -1.98676,1.9867 9.07416,13.8365 10.34816,16.3845 2.87494,5.7499 10.51739,15.8661 17.24688,18.1092 69.57702,23.1924 68.47583,-63.69675 106.93079,-50.8783 25.47788,8.4926 17.93869,61.2265 13.79751,61.2265 -4.54633,0 1.86112,-32.5889 2.58704,-36.2185 1.63481,-8.1741 -8.336,-25.008 0,-25.008 23.1702,0 56.38131,-4.3117 84.50982,-4.3117 6.92267,0 20.69627,8.6474 20.69627,1.7246 0,-22.13767 -106.83933,7.883 -73.29932,52.6031 15.39517,20.5269 45.97363,7.0247 56.91476,-11.2104 4.27342,-7.1224 5.92963,-41.2859 6.03643,-41.3927 3.30032,-3.3003 25.38957,-5.1906 31.04441,-7.7611 8.17799,-3.71727 116.56888,-61.61957 80.19809,-70.71237 -62.06519,-15.5162 -84.81857,132.80117 -47.42898,132.80117 39.83429,0 168.06934,-127.94377 127.62705,-141.42457 -48.77358,-16.2579 -78.2302,99.41297 -51.74069,125.90247 20.35735,20.3573 58.34681,-22.9907 73.29932,-37.9432 37.20757,-37.20767 16.38455,62.9731 16.38455,52.603 0,-50.488 -2.86125,-72.28997 41.39257,-61.2265 18.42188,4.6055 41.59056,-2.80515 61.22649,0 33.65343,4.8077 18.48038,96.0268 157.85652,147.0903"
/>
</svg>
Resources:
Image: https://gist.github.com/ziyan-junaideen/3f3ffc99d6812ff78717
Example: https://github.com/Prinzhorn/skrollr/blob/master/examples/path.html

Editing an svg file

I have an svg file that maps out a theater seating area. Currently it draws each seat as a circle. I would like to change this to a square.
Here is the code I have
id="path7"
title="F46"
d="m 281.9461,86.766 c -2.796,0 -5.071,-2.275 -5.071,-5.071 0,-2.796 2.275,-5.072 5.071,-5.072 2.797,0 5.072,2.276 5.072,5.072 0,2.796 -2.275,5.071 -5.072,5.071 z"
inkscape:connector-curvature="0"
fill="#CDCDCD"
stroke="#CDCDCD"
stroke-width="3" />
If anyone could help on this it would be great

you have two options:
use a library for SVG http://www.svgjs.com/
manipulate Text by specifications.
change d=m 281.9461, 86.766 c <List of Coordinates>
to d=m 281.9461, 86.766 c <top left coord>, <top right coord>, <bottom right coord>, <bottom left coord>

I replaced the code I have above with this
d="m 494.33766,216.207 h -12 v -12 h 12 z"
Some great information on the topic here which gave me the exact information I was looking for
http://my.safaribooksonline.com/book/programming/flex/9781449388195/graphics/use_path_to_draw_a_shape_with_stroke

Resources