I need to know how to combine multiple from a SVG file.
Right now I have three icons and somehow I can not find any logic behind that.
I read that I need to remove the last part and combine it with the following.
Example:
From
<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437zm0 0"/><path d="m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
TO
<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437 m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
But the output is empty.
And if I only take one path of both I will see only this path.
Is there any easy explanation how to do that?
If you then take your path:
M54.4 2a54.4 54.4 0 106.2 108.4c9.1 2.2 18.9 3.5 28.3 5.2a40 40 0 0132.4 32.4l35.4 99.7a49.9 49.9 0 0049.2 41.3h210c22 0 41.5-14.4 47.9-35.5l47-155.8c.8-3 .3-6.3-1.5-8.9-2-2.5-4.9-4-8-4H148.2l-7.2-40.3c-7-24.4-13.6-38.3-49.2-48.7A54.2 54.2 0 0054.4 2zm0 20a34.4 34.4 0 110 68.8 34.4 34.4 0 010-68.8zm97.4 182.7h336l-43.1 142.9a29.8 29.8 0 01-28.7 1.3H206c-14.6 0-27-10.4-29.5-24.8z
and multiply it by 10 using: https://yqnn.github.io/svg-path-editor/
You get rid of all decimal notation and make the file even smaller:
M 544 20 a 544 544 90 1 0 62 1084 c 91 22 189 35 283 52 a 400 400 90 0 1 324 324 l 354 1997 a 499 499 90 0 0 492 413 h 2100 c 220 0 415 -144 479 -355 l 470 -1558 c 8 -30 3 -63 -15 -89 c -20 -25 -49 -40 -80 -40 H 1482 l -72 -403 c -70 -244 -136 -383 -492 -487 A 542 542 90 0 0 544 20 z m 0 200 a 344 344 90 1 1 0 688 a 344 344 90 0 1 0 -688 z m 974 1827 h 3360 l -431 1429 a 298 298 90 0 1 -287 213 H 2060 c -146 0 -270 -104 -295 -248 z
The viewBox ofcourse needs to be multiplied as well. As the (default) stroke-width="1"
<svg width="400" viewBox="0 0 5150 3900">
<path d="M544 20a544 544 90 1 0 62 1084c91 22 189 35 283 52a400 400 90 0 1 324 324l354 1997
a499 499 90 0 0 492 413h2100c220 0 415-144 479-355l470-1558c8-30 3-63-15-89
c-20-25-49-40-80-40h-3531l-72-403c-70-244-136-383-492-487a542 542 90 0 0-374-938z
m0 200a344 344 90 1 1 0 688a344 344 90 0 1 0-688z
m974 1827h3360l-431 1429a298 298 90 0 1-287 213h-2100c-146 0-270-104-295-248z"
stroke="red" stroke-width="10" fill="gray"/>
</svg>
You can save 30 bytes more in the path if you now divide everything by 6
M90 3a90 90 90 1 0 10 180c15 4 31 6 47 9a66 66 90 0 1 54 54l59 332a83 83 90 0 0 82 69h349c37 0 69-24 80-59l78-259c1-5 0-10-2-15c-3-4-8-7-13-7h-588l-12-67c-12-41-23-64-82-81a90 90 90 0 0-62-156zm0 33a57 57 90 1 1 0 114a57 57 90 0 1 0-114zm162 303h558l-72 237a49 49 90 0 1-48 35h-348c-24 0-45-17-49-41z
You can visualize your paths if you put them in a suitable <svg> element. It needs to have a "sensible" viewBox attribute in it. For your example the following works: <svg viewBox="0 0 620 840">. I also added two rectangles (<rect>) to show the extent of your overlaying symbols.
Note: To actually combine two paths into one is a slightly more complex task. This can be done with a suitable graphical SVG-editor, like Inkscape (or many others ...).
<svg viewBox="0 0 620 840">
<rect x="0" y="0" width="480" height="440" style="stroke:black;fill:none"/>
<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437zm0 0"/><path d="m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
<rect x="80" y="300" width="540" height="440" style="stroke:black;fill:none"/>
<g style="fill:none;stroke:red">
<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437 m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
</g>
</svg>
I combined the two paths of your second part using Inkscape, put it through the online SVG optimizer SVGOMG! (thanks for the hint, Danny '365CSI' Engelman) and ended up with this:
<svg xmlns="http://www.w3.org/2000/svg"
width="400" viewBox="-1 0 515 390">
<path d="M54.4 2a54.4 54.4 0 106.2 108.4
c9.1 2.2 18.9 3.5 28.3 5.2
a40 40 0 0132.4 32.4l35.4 199.7a49.9 49.9 0 0049.2 41.3
h210c22 0 41.5-14.4 47.9-35.5l47-155.8
c.8-3 .3-6.3-1.5-8.9-2-2.5-4.9-4-8-4H148.2l-7.2-40.3
c-7-24.4-13.6-38.3-49.2-48.7A54.2 54.2 0 0054.4 2zm0 20
a34.4 34.4 0 110 68.8 34.4 34.4 0 010-68.8z
m97.4 182.7h336l-43.1 142.9a29.8 29.8 0 01-28.7 21.3H206
c-14.6 0-27-10.4-29.5-24.8z"
stroke="red" fill="gray"/>
</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 convert PGN chess pieces into SVG files then load them up into Glyphr Studio that makes a .OTF file so that I use then in various chess programs.
Unfortunately after installing the font the white pieces are all transparent instead of being a solid white piece.
Could someone have a look at my code to see why I have this problem, this is the white rook.
<?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="315.000000pt" height="271.000000pt" viewBox="0 0 315.000000 271.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,271.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M387 2423 c-4 -3 -7 -386 -7 -850 l0 -843 -57 -26 c-67 -29 -126 -82
-155 -138 -29 -57 -36 -173 -13 -233 24 -63 94 -135 158 -164 l52 -24 1205 0
c1161 0 1207 1 1254 19 200 77 252 338 95 481 -24 23 -70 51 -101 64 l-58 23
-2 847 -3 846 -305 0 -305 0 -3 -162 -2 -163 -130 0 -130 0 -2 163 -3 162
-305 0 -305 0 -3 -162 -2 -163 -130 0 -130 0 -2 163 -3 162 -301 3 c-165 1
-303 -1 -307 -5z m473 -298 l0 -165 270 0 270 0 0 165 0 165 170 0 170 0 0
-165 0 -165 270 0 270 0 0 165 0 165 170 0 170 0 0 -780 0 -780 -1050 0 -1050
0 0 780 0 780 170 0 170 0 0 -165z m1912 -1562 c118 -54 118 -202 0 -256 l-47
-22 -1150 0 -1150 0 -47 22 c-57 26 -88 71 -88 128 0 46 28 98 62 116 70 38
70 38 1238 36 l1135 -2 47 -22z"/>
</g>
</svg>
I would like to use SvgIcon like that :
const iconsSVG = {
// WORKING
"PS1": "M8.985 2.596v17.548l3.915 1.261V6.688c0-.69.304-1.151.794-.991.636.181.76.814.76 1.505v5.876c2.441 1.193 4.362-.002 4.362-3.153 0-3.237-1.126-4.675-4.438-5.827-1.307-.448-3.728-1.186-5.391-1.502h-.002zm4.656 16.242l6.296-2.275c.715-.258.826-.625.246-.818-.586-.192-1.637-.139-2.357.123l-4.205 1.499v-2.385l.24-.085s1.201-.42 2.913-.615c1.696-.18 3.785.029 5.437.661 1.848.601 2.041 1.472 1.576 2.072s-1.622 1.036-1.622 1.036l-8.544 3.107v-2.297l.02-.023zM1.808 18.6c-1.9-.545-2.214-1.668-1.352-2.321.801-.585 2.159-1.051 2.159-1.051l5.616-2.013v2.313L4.206 17c-.705.271-.825.632-.239.826.586.195 1.637.15 2.343-.12L8.248 17v2.074c-.121.029-.256.044-.391.073-1.938.331-3.995.196-6.037-.479l-.012-.068z",
"PS2": "M7.46 13.779v.292h4.142v-3.85h3.796V9.93h-4.115v3.85zm16.248-3.558v1.62h-7.195v2.23H24v-.292h-7.168v-1.646H24V9.929h-7.487v.292zm-16.513 0v1.62H0v2.23h.292v-1.938H7.46V9.929H0v.292Z",
"PS3": "M15.363 9.438h-3.148c-.97 0-1.447.6-1.447 1.38v2.366c0 .483-.228.83-.71.83H7.304c-.02 0-.035.017-.035.035v.47c0 .02.01.032.03.032h3.11c.97 0 1.45-.597 1.45-1.377V10.81c0-.484.225-.832.71-.832h2.782c.02 0 .04-.014.04-.033V9.47c0-.02-.02-.035-.04-.035zm-9.267 0H.038c-.022 0-.038.017-.038.035v.477c0 .02.016.036.038.036h5.694c.48 0 .71.347.71.83s-.228.83-.71.83H1.228c-.7 0-1.227.587-1.227 1.366v1.513c0 .02.02.037.04.037h1.03c.02 0 .04-.016.04-.037v-1.513c0-.48.28-.82.68-.82H6.1c.97 0 1.444-.595 1.444-1.375 0-.778-.473-1.38-1.442-1.38zm17.454 2.498c-.015-.015-.015-.04 0-.056.3-.25.45-.627.45-1.062 0-.778-.474-1.38-1.446-1.38h-6.057c-.02 0-.036.018-.036.038v.475c0 .02.02.04.04.04h5.7c.48 0 .715.35.715.83s-.23.83-.712.83h-5.7c-.02 0-.036.02-.036.04v.48c0 .02.016.034.037.034h5.7c.63.007.71.62.71.93v.06c0 .485-.23.833-.71.833h-5.7c-.02 0-.036.015-.036.034v.477c0 .02.015.037.036.037h6.05c.973 0 1.446-.645 1.446-1.38v-.057c0-.47-.15-.916-.45-1.19z",
// NOT WORKING
"PSP": "M67.5,194 174.4,194 174.4,225.7 71.7,225.7 71.7,253.2 67.5,253.2 67.5,221.5 170.2,221.5 170.2,198.2 67.5,198.2 67.5,194 M307.9,225.7 307.9,253.2 303.7,253.2 303.7,221.5 406.3,221.5 406.3,198.2 303.7,198.2 303.7,194 410.6,194 410.6,225.7 307.9,225.7 M228.9,194 228.9,249 174.4,249 174.4,253.2 233.3,253.2 233.3,198.2 287.8,198.2 287.8,194 228.9,194",
"PC": "M1210 2030 l0 -1730 420 0 420 0 2 583 3 582 245 3 245 2 268 268 267 267 0 605 0 605 -273 273 -272 272 -663 0 -662 0 0 -1730z m998 571 l2 -462 -77 3 -78 3 -3 457 -2 457 67 3 c38 2 73 3 78 3 6 -1 11 -165 13 -464z M3492 3487 l-272 -272 0 -1190 0 -1190 268 -268 268 -267 450 0 449 0 268 268 267 267 -2 475 -3 475 -440 0 -440 0 -3 -397 -2 -398 -70 0 -70 0 0 1035 0 1035 70 0 70 0 2 -327 3 -328 440 0 440 0 3 405 2 405 -272 272 -273 273 -440 0 -440 0 -273 -273z"
}
// ... some piece of code latter
<SvgIcon>
<path d={iconsSVG["PS3"]} /> // any key of the iconsSVG could be used
</SvgIcon>
However, the "PSP" and "PC" icons aren't displayed and I cannot find out what could be the error when I convert them.
Here are the original files :
PSP icon :
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<path d="M 67.5,194 174.4,194 174.4,225.7 71.7,225.7 71.7,253.2 67.5,253.2 67.5,221.5 170.2,221.5 170.2,198.2 67.5,198.2 67.5,194"></path>
<path d="M 307.9,225.7 307.9,253.2 303.7,253.2 303.7,221.5 406.3,221.5 406.3,198.2 303.7,198.2 303.7,194 410.6,194 410.6,225.7 307.9,225.7"></path>
<path d="M 228.9,194 228.9,249 174.4,249 174.4,253.2 233.3,253.2 233.3,198.2 287.8,198.2 287.8,194 228.9,194"></path>
</svg>
PC icon :
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="640.000000pt" height="407.000000pt" viewBox="0 0 640.000000 407.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,407.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1210 2030 l0 -1730 420 0 420 0 2 583 3 582 245 3 245 2 268 268
267 267 0 605 0 605 -273 273 -272 272 -663 0 -662 0 0 -1730z m998 571 l2
-462 -77 3 -78 3 -3 457 -2 457 67 3 c38 2 73 3 78 3 6 -1 11 -165 13 -464z"/>
<path d="M3492 3487 l-272 -272 0 -1190 0 -1190 268 -268 268 -267 450 0 449
0 268 268 267 267 -2 475 -3 475 -440 0 -440 0 -3 -397 -2 -398 -70 0 -70 0 0
1035 0 1035 70 0 70 0 2 -327 3 -328 440 0 440 0 3 405 2 405 -272 272 -273
273 -440 0 -440 0 -273 -273z"/>
</g>
</svg>
Thanks for the help
PSP and PC icons have 3 and 2 path and viewBox="0 0 500 500" viewBox="0 0 640.000000 407.000000"
This SvgIcon has 1 path and "0 0 24 24" default viewBox
You can specify viewBox prop and path array for your icons but in PC item there is also g tag so it won't be displayed that way
const iconsSVG = {
// WORKING
PS1: {
path: [
"M8.985 2.596v17.548l3.915 1.261V6.688c0-.69.304-1.151.794-.991.636.181.76.814.76 1.505v5.876c2.441 1.193 4.362-.002 4.362-3.153 0-3.237-1.126-4.675-4.438-5.827-1.307-.448-3.728-1.186-5.391-1.502h-.002zm4.656 16.242l6.296-2.275c.715-.258.826-.625.246-.818-.586-.192-1.637-.139-2.357.123l-4.205 1.499v-2.385l.24-.085s1.201-.42 2.913-.615c1.696-.18 3.785.029 5.437.661 1.848.601 2.041 1.472 1.576 2.072s-1.622 1.036-1.622 1.036l-8.544 3.107v-2.297l.02-.023zM1.808 18.6c-1.9-.545-2.214-1.668-1.352-2.321.801-.585 2.159-1.051 2.159-1.051l5.616-2.013v2.313L4.206 17c-.705.271-.825.632-.239.826.586.195 1.637.15 2.343-.12L8.248 17v2.074c-.121.029-.256.044-.391.073-1.938.331-3.995.196-6.037-.479l-.012-.068z",
],
viewBox: "0 0 24 24",
},
PS2: {
path: [
"M7.46 13.779v.292h4.142v-3.85h3.796V9.93h-4.115v3.85zm16.248-3.558v1.62h-7.195v2.23H24v-.292h-7.168v-1.646H24V9.929h-7.487v.292zm-16.513 0v1.62H0v2.23h.292v-1.938H7.46V9.929H0v.292Z",
],
viewBox: "0 0 24 24",
},
PS3: {
path: [
"M15.363 9.438h-3.148c-.97 0-1.447.6-1.447 1.38v2.366c0 .483-.228.83-.71.83H7.304c-.02 0-.035.017-.035.035v.47c0 .02.01.032.03.032h3.11c.97 0 1.45-.597 1.45-1.377V10.81c0-.484.225-.832.71-.832h2.782c.02 0 .04-.014.04-.033V9.47c0-.02-.02-.035-.04-.035zm-9.267 0H.038c-.022 0-.038.017-.038.035v.477c0 .02.016.036.038.036h5.694c.48 0 .71.347.71.83s-.228.83-.71.83H1.228c-.7 0-1.227.587-1.227 1.366v1.513c0 .02.02.037.04.037h1.03c.02 0 .04-.016.04-.037v-1.513c0-.48.28-.82.68-.82H6.1c.97 0 1.444-.595 1.444-1.375 0-.778-.473-1.38-1.442-1.38zm17.454 2.498c-.015-.015-.015-.04 0-.056.3-.25.45-.627.45-1.062 0-.778-.474-1.38-1.446-1.38h-6.057c-.02 0-.036.018-.036.038v.475c0 .02.02.04.04.04h5.7c.48 0 .715.35.715.83s-.23.83-.712.83h-5.7c-.02 0-.036.02-.036.04v.48c0 .02.016.034.037.034h5.7c.63.007.71.62.71.93v.06c0 .485-.23.833-.71.833h-5.7c-.02 0-.036.015-.036.034v.477c0 .02.015.037.036.037h6.05c.973 0 1.446-.645 1.446-1.38v-.057c0-.47-.15-.916-.45-1.19z",
],
viewBox: "0 0 24 24",
},
// NOT WORKING
PSP: {
path: [
"M 67.5,194 174.4,194 174.4,225.7 71.7,225.7 71.7,253.2 67.5,253.2 67.5,221.5 170.2,221.5 170.2,198.2 67.5,198.2 67.5,194",
"M 307.9,225.7 307.9,253.2 303.7,253.2 303.7,221.5 406.3,221.5 406.3,198.2 303.7,198.2 303.7,194 410.6,194 410.6,225.7 307.9,225.7",
"M 228.9,194 228.9,249 174.4,249 174.4,253.2 233.3,253.2 233.3,198.2 287.8,198.2 287.8,194 228.9,194",
],
viewBox: "0 0 500 500",
},
PC: {
path: [
"M1210 2030 l0 -1730 420 0 420 0 2 583 3 582 245 3 245 2 268 268 267 267 0 605 0 605 -273 273 -272 272 -663 0 -662 0 0 -1730z m998 571 l2 -462 -77 3 -78 3 -3 457 -2 457 67 3 c38 2 73 3 78 3 6 -1 11 -165 13 -464z",
"M3492 3487 l-272 -272 0 -1190 0 -1190 268 -268 268 -267 450 0 449 0 268 268 267 267 -2 475 -3 475 -440 0 -440 0 -3 -397 -2 -398 -70 0 -70 0 01035 0 1035 70 0 70 0 2 -327 3 -328 440 0 440 0 3 405 2 405 -272 272 -273 273 -440 0 -440 0 -273 -273z",
],
viewBox: "0 0 640.000000 407.000000",
},
};
// ... some piece of code latter
function App() {
const type = "PC";
const { viewBox, path } = iconsSVG[type];
return (
<SvgIcon viewBox={viewBox}>
{path.map((d) => (
<path d={d} key={d} />
))}
</SvgIcon>
);
}
You should better save your SVG as simple react components without material SVG then import them and put to an array
your PC file svg code
import React from "react";
export const PCSvg = () => (
<svg
width='24'
height='24'
viewBox="0 0 640.000000 407.000000"
preserveAspectRatio="xMidYMid meet"
>
<g
transform="translate(0.000000,407.000000) scale(0.100000,-0.100000)"
fill="#000000"
stroke="none"
>
<path
d="M1210 2030 l0 -1730 420 0 420 0 2 583 3 582 245 3 245 2 268 268
267 267 0 605 0 605 -273 273 -272 272 -663 0 -662 0 0 -1730z m998 571 l2
-462 -77 3 -78 3 -3 457 -2 457 67 3 c38 2 73 3 78 3 6 -1 11 -165 13 -464z"
/>
<path
d="M3492 3487 l-272 -272 0 -1190 0 -1190 268 -268 268 -267 450 0 449
0 268 268 267 267 -2 475 -3 475 -440 0 -440 0 -3 -397 -2 -398 -70 0 -70 0 0
1035 0 1035 70 0 70 0 2 -327 3 -328 440 0 440 0 3 405 2 405 -272 272 -273
273 -440 0 -440 0 -273 -273z"
/>
</g>
</svg>
);
Your import code
import { PCSvg } from './PC';
function App() {
return (
<PCSvg />
);
}
export default App;
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>