How do I convert svg code to svg path image? - svg
How would I be able to convert this type of svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="250" viewBox="0 0 250 250">
<metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c145 79.163499, 2018/08/13-16:40:22 ">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<rdf:Description rdf:about=""
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:photoshop="http://ns.adobe.com/photoshop/1.0/"
xmlns:xmp="http://ns.adobe.com/xap/1.0/"
xmlns:xmpRights="http://ns.adobe.com/xap/1.0/rights/">
<xmpRights:Marked>True</xmpRights:Marked>
</rdf:Description>
</rdf:RDF>
</x:xmpmeta>
<?xpacket end="w"?></metadata>
<image id="N_side_slit" data-name="N side slit" x="21" y="44" width="178" height="148" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAALIAAACUCAYAAAA3f3NDAAADx0lEQVR4nO3a3Y3rNhCA0dm9eUtTaSA9pIX0ky5SQFJCmslj4GCBXcAw1j+SSHGGPN+zJdP0sSCTertcLpeo2VvRcc/eEE/vhUFU/QGqQ++fp4RZpXu/GjzMKtv7zcBhVsluIQfMqth3kANmVese5IBZlXoEOWBWlZ5BDphVoVcgB8zK3quQA2ZlbgvkgFlZ2wo5YFbG9kAOmJWtvZDjE/M/BXHAPGFHIH/0e0T8C7NGdxTy3xHxK8wa3VHIAbMy1AJywKzRtYIcMGtkLSEHzBpVa8gBs0bUA3LArLPrBTlg1pn1hBww66x6Qw6YdUZnQA6Y1buzIAfM6tmZkANm9epsyAGzejQCcsCs1o2CHDCrZSMhB8xq1WjIAbNalAFywKyjZYEcMOtImSAHzNpbNsgBs/aUEXLArK1lhRwwa0uZIQfMerXskANmvVIFyAGznjUS8m8bXw+z7jYS8h8wq1UjIf+AWa0afY8Ms5qU4c8ezDpcllULmHWoTMtvMGt32daRYdauMm6IwKzNZd3Zg1mbyrxFDbNeLvuzFjDrpSo8NASznlbl6TeY9bAqkANmPaoS5IBZ96oGOWDWd1WEHDDrtqqQA2ZdVxlywKyvqkMOmBWTQA6YNQvkgHntZoIcMK/bbJAD5jWbEXLAvF6zQg6Y12pmyAHzOs0OOWBeoxUgB8zz93a5DPu8I974v4j4acdxv0TEnxHx88ecdRhXz84e7xBQq1yRv/qx8zhX5uStBvlIMCcO5G3BnDSQtwdzwkDeF8zJAnl/MCcK5GNdY67WVJhXW0eOTuuqH+vMf3U47xm1no8h3yvIbat6lWs5JzZEJqjart9X5W8zQG4fzAMCuU8wnxzI/YL5xEDuG8wnBXL/YD4hkM8J5s6BfF4wdwzkc4O5UyCfH8wdAnlMMDcO5HHB3DCQxwZzo0AeH8wNAjlHMB8M5DzBfCCQcwXzzkDOF8w7AjlnMG8M5LxVxTwkkHMH84uBnD+YXwjkGsH8JJDrBPODQK4VzHcCuV4wfxPINYP5JpDrBvNVINcO5s9Art/ymAPkaVoeM8jztDRmkOdqWcwgz9eSmEGes+UwgzxvS2EGee6WwQzy/C2BGeQ1mh4zyOs0NWaQ12pazCCv15SYQV6z6TCDvG5TYQZ57abBDLKmwAyyYgbMIOur0phB1nVlMYOs20piBlnfVQ4zyLpXKcwg61FlMIOsZ5XADLJeKT1mkPVqqTGDrC2lxQyytpYSM8jaUzrMIGtvqTCDrCOlwQyyjpYCM8hq0XDMIKtV4zBHxP/bUFzI1KMfEAAAAABJRU5ErkJggg=="/>
</svg>
To a type of svg that has a path and is usable in html like this:
<svg width="36px" height="24px" viewBox="0 0 36 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M8.98885921,23.8523026 C8.8942483,23.9435442 8.76801031,24 8.62933774,24 L2.03198365,24 C1.73814918,24 1.5,23.7482301 1.5,23.4380086 C1.5,23.2831829 1.55946972,23.1428989 1.65570253,23.0416777 L13.2166154,12.4291351 C13.3325814,12.3262031 13.4061076,12.1719477 13.4061076,11.999444 C13.4061076,11.8363496 13.3401502,11.6897927 13.2352673,11.587431 L1.68841087,0.990000249 C1.57298556,0.88706828 1.5,0.733668282 1.5,0.561734827 C1.5,0.251798399 1.73814918,2.85130108e-05 2.03198365,2.85130108e-05 L8.62933774,2.85130108e-05 C8.76855094,2.85130108e-05 8.89532956,0.0561991444 8.98994048,0.148296169 L21.4358709,11.5757407 C21.548593,11.6783875 21.6196864,11.8297916 21.6196864,11.999444 C21.6196864,12.1693815 21.5483227,12.3219261 21.4350599,12.4251432 L8.98885921,23.8523026 Z M26.5774333,23.8384453 L20.1765996,17.9616286 C20.060093,17.8578413 19.9865669,17.703871 19.9865669,17.5310822 C19.9865669,17.3859509 20.0390083,17.2536506 20.1246988,17.153855 L23.4190508,14.1291948 C23.5163648,14.0165684 23.6569296,13.945571 23.8131728,13.945571 C23.9602252,13.945571 24.0929508,14.0082997 24.1894539,14.1092357 L33.861933,22.9913237 C33.9892522,23.0939706 34.0714286,23.2559245 34.0714286,23.4381226 C34.0714286,23.748059 33.8332794,23.9998289 33.5394449,23.9998289 L26.9504707,23.9998289 C26.8053105,23.9998289 26.6733958,23.9382408 26.5774333,23.8384453 Z M26.5774333,0.161098511 C26.6733958,0.0615881034 26.8053105,0 26.9504707,0 L33.5394449,0 C33.8332794,0 34.0714286,0.251769886 34.0714286,0.561706314 C34.0714286,0.743904453 33.9892522,0.905573224 33.861933,1.00822006 L24.1894539,9.89030807 C24.0929508,9.99152926 23.9602252,10.0542579 23.8131728,10.0542579 C23.6569296,10.0542579 23.5163648,9.98354562 23.4190508,9.87063409 L20.1246988,6.8459739 C20.0390083,6.74617837 19.9865669,6.613878 19.9865669,6.46874677 C19.9865669,6.29624305 20.060093,6.14198767 20.1765996,6.03848544 L26.5774333,0.161098511 Z" fill="#FFFFFF"></path>
</svg>
(These are 2 different images)
You'll need to load the first one into a vector editor (eg Inkscape) and use the editor's drawing tools to manually recreate the shape(s).
After 2-3 hours of messing with every possible online program. I downloaded Inkscape and tried to make a svg.
It took another 2 hours because it was showing 0 path every time I was trying to make a svg. Then I found out it didn't detect the shape because it was white.
So I had to go back to photoshop, change the colour to black, save as a PNG then open it on Inkscape then re-path it. Took me way to long to figure this out.
You will need a thirdparty program to make svgs, there is no escaping them. I tried.
Thank you Paul for the suggestion.
Related
Proper use of <use> and <svg>
I'm referencing an svg file's content from my html, like this: <svg id='container' width="19" height="19"> <use href="../svg.svg#path"/> </svg> svg.svg <svg id="home" width="19" height="19" viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg"> <path id='path' fill-rule="evenodd" clip-rule="evenodd" d="M6.10156 2.31433C4.85892 2.31433 3.85156 3.32169 3.85156 4.56433V7.27979L5.21733 6.15722C5.88058 5.61207 6.84134 5.62857 7.48549 6.19616L11.5046 9.7376C11.8811 10.0694 12.0971 10.547 12.0976 11.0489L12.1032 16.8638H14.6256C15.8682 16.8638 16.8756 15.8565 16.8756 14.6138V4.56433C16.8756 3.32169 15.8682 2.31433 14.6256 2.31433H6.10156ZM2.35156 4.56433V8.51269L0.879033 9.72301C0.474603 10.0554 0.240234 10.5514 0.240234 11.0749L0.240249 16.6071C0.240252 17.5731 1.02297 18.3564 1.98897 18.3571L12.1047 18.3645L12.1047 18.3638H14.6256C16.6966 18.3638 18.3756 16.6849 18.3756 14.6138V4.56433C18.3756 2.49326 16.6966 0.814331 14.6256 0.814331H6.10156C4.03049 0.814331 2.35156 2.49326 2.35156 4.56433ZM6.49381 7.32159C6.40179 7.2405 6.26454 7.23814 6.16979 7.31602L1.83149 10.8818C1.77372 10.9293 1.74023 11.0002 1.74023 11.0749L1.74025 16.6071C1.74025 16.7451 1.85207 16.857 1.99007 16.8571L5.42188 16.8596V14.1996C5.42188 13.7854 5.75766 13.4496 6.17188 13.4496C6.58609 13.4496 6.92188 13.7854 6.92188 14.1996V16.8607L10.6032 16.8634L10.5976 11.0503C10.5975 10.9786 10.5667 10.9104 10.5129 10.863L6.49381 7.32159Z" /> </svg> Question is: Why do I need to set width and height in container? If I fail to do so, container takes up 150px by 300px. How could I just make container automatically shrink to fit home's dimensions? Thanks
The HTML spec says that if the size of any "replaced element" (that's things like <svg>, <canvas>, <object> etc) is not specified, then its size should default to 300px x 150px. The <use> points to a <path>, rather than a whole SVG image, so it's size is indeterminate. Given your use case, you cannot.
How correctly fill one SVG path with two closed lines?
I have SVG file with one path and 2 lines in d attribute. It have valid fill and look like this You can view source of this svg file here img1.svg I change one line of this svg, I make symbol bold. After changes it look like this it have a wrong fill. You can view source of this svg file here img2.svg What is the reason of invalid fill of second file?
In order that the inner circle is not stained, you need to write fill-rule="evenodd" More details W3C <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1362.71301" height="300"> <g fill="#ffff00" fill-rule="evenodd" stroke="#000000" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"> <g><path d=" M77.71,95.66 c-2.96667,0 -5.29,-1.83333 -6.97,-5.5 c-1.64,-3.67333 -2.46,-8.75333 -2.46,-15.24 c0,-3.90667 0.31333,-8.71 0.94,-14.41 c0.78,-7.38667 1.93333,-14.08667 3.46,-20.1 c4.29333,-17.07333 10.52333,-25.61 18.69,-25.61 c2.96667,0 5.27,1.83667 6.91,5.51 c1.68,3.63333 2.52,8.69333 2.52,15.18 c0,3.94667 -0.31333,8.77 -0.94,14.47 c-0.82,7.38667 -1.97,14.08667 -3.45,20.1 c-4.3,17.06667 -10.53333,25.6 -18.7,25.6z M111.52099,8.30178 c2.06115,1.73429 3.75889,3.86645 5.10023,6.37052 c3.04871,5.64268 4.45878,24.3877 4.45878,24.3877 c0,16.53189 -3.37894,31.27394 -10.19147,44.17397 l-0.00092,0.00173 c-3.89891,7.36538 -8.6741,13.15159 -14.36187,17.27221 c-2.74934,2.00414 -5.66985,3.58411 -8.75938,4.73219 c-4.08503,1.518 -13.03637,2.26991 -13.03637,2.26991 c-7.00914,0 -12.81163,-1.73054 -17.18095,-5.41104 c-2.05687,-1.73261 -3.75131,-3.86164 -5.09027,-6.36127 c-3.04829,-5.64187 -4.45878,-24.3277 -4.45878,-24.3277 c0,-16.571 3.37858,-31.33325 10.19147,-44.23397l0.00309,-0.00584 c3.89784,-7.32217 8.64929,-13.10249 14.28863,-17.26001l0.01363,-0.00996 c2.82017,-2.04262 5.81485,-3.64444 8.98181,-4.79736 c4.04607,-1.47296 8.3447,-2.20287 12.88137,-2.20287 c6.99886,0 12.79443,1.72768 17.16099,5.40178z" id="letter"></path></g> </g></svg>
using inkscape svg in html on web
I'm using inkscape .91 and would like to create an svg which I can use on the web. I'm a newbie. I can export it in png - no problem but have no idea how to include it in the web as SVG which, since I want a responsive site, is quite important. I've tried using the img tag but get nothing. I've edited the xml and changed standalone='no' to standalone='yes' with no luck. Tried adding width/height to img tag, ... I'm stumped, can someone help. svg is below and at outtopastureenterprises.com/exper/modal/Not_Love_Heart_SVG.svg Thanks. <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.0" width="645" height="585" id="svg2" inkscape:version="0.91 r13725" sodipodi:docname="Not_Love_Heart_SVG.svg"> <metadata id="metadata4194"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> </cc:Work> </rdf:RDF> </metadata> <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1550" inkscape:window-height="817" id="namedview4192" showgrid="false" inkscape:zoom="0.4034188" inkscape:cx="-31981.512" inkscape:cy="292.5" inkscape:window-x="96" inkscape:window-y="81" inkscape:window-maximized="0" inkscape:current-layer="svg2" /> <defs id="defs4" /> <g id="layer1" transform="translate(-32549.301,4.9576272)" style="opacity:1" inkscape:export-xdpi="90" inkscape:export-ydpi="90"> <path d="M 297.29747,550.86823 C 283.52243,535.43191 249.1268,505.33855 220.86277,483.99412 137.11867,420.75228 125.72108,411.5999 91.719238,380.29088 29.03471,322.57071 2.413622,264.58086 2.5048478,185.95124 2.5493594,147.56739 5.1656152,132.77929 15.914734,110.15398 34.151433,71.768267 61.014996,43.244667 95.360052,25.799457 119.68545,13.443675 131.6827,7.9542046 172.30448,7.7296236 c 42.49329,-0.234834 51.43863,4.7197234 76.43471,18.4518354 30.42451,16.714318 61.7399,52.435708 68.21323,77.810591 l 3.9981,15.6724 9.85963,-21.584508 c 55.71617,-121.972928 233.59836,-120.148052 295.50229,3.031588 19.63767,39.07605 21.79364,122.51317 4.38012,169.51287 -22.71527,61.30937 -65.38001,108.05053 -164.00634,179.67658 -64.68082,46.97364 -137.88474,118.04586 -142.98067,128.02803 -5.91548,11.58753 -0.28216,1.8159 -26.40808,-27.46078 z" id="path2417" style="fill:#ff0000" inkscape:connector-curvature="0" /> <g transform="translate(129.28571,-64.285714)" id="g2221" style="" /> </g> <circle style="opacity:1;fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:63.969;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="path4775" cx="-32225.816" cy="262.75424" r="370.99817" inkscape:export-xdpi="90" inkscape:export-ydpi="90" /> <path style="opacity:1;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:85.313;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m -32507.316,538.23981 565.479,-506.352496" id="path4777" inkscape:connector-curvature="0" inkscape:export-xdpi="90" inkscape:export-ydpi="90" /> </svg>
Load up your image in Inkscape and zoom out. Zoom way, way out. That's it, keep going. Eventually you'll see something like this: See that little box way over there on the right? That's where you should be drawing your picture. Not in outer space. If you move your artwork to where it's supposed to be, you'll notice that it doesn't quite fit inside the page boundary. Fix this by changing the size of your document (File » Document Properties) to 806x806 pixels and centring the drawing in the page. That should fix the problem. Then save the file as a "Plain SVG". This will reduce the amount of unnecessary spew that Inkscape adds to your document, making it take up less bandwidth. Another thing you could do before saving the file is click on the "SVG output" tab in the preferences window and change the "Numeric precision" setting to something sensible like 1 or 2. You don't need micro-pixel precision in a file like this.
Here are my recommendations for embedding an svg in html.
1. Simplify shapes
Select all elements of the same color with this tool.
Convert them into paths.
Merge them.
2. Control the image size and position.
Choose "Icon 16x16" as page size
Select all the graphic elements and resize them to fit in the 16x16 pixel frame.
Check that there are no transformations.
You can open the .svg file in a text editor to see if there are any "transorm" tags,
the following steps will remove the scalings and translations.
Select all and apply the "convert path to absolute" command
Some transformations may remain after this step.
Choose the shape in question and apply a scaling of 100% having checked the box "Apply to each object separately"
Now your svg is cleaner.
You can use File -> Clean Up Document to make it even cleaner.
3. Embedding in the HTML
Paste it into an svg symbol that you can call anywhere in your HTML.
Here, I set the size of the icon to 40x40
And voilà!
<html>
<head>
<style>
#my-svg-symbols{
display: none;
}
</style>
<svg id="my-svg-symbols" xmlns="http://www.w3.org/2000/svg">
<symbol id="my-symbol-name" viewBox="0 0 16 16">
<circle
style="fill:#000000;stroke-width:0.516923;stroke-linecap:round;stroke-linejoin:round"
id="path835"
cx="7.9999986"
cy="7.9999986"
r="7.0192308" />
<path
d="M 5.8618,3.169 C 5.6917,3.1689 5.5537,3.3068 5.5539,3.4769 5.5537,3.6471 5.6917,3.785 5.8618,3.7849 6.0316,3.7845 6.169,3.6467 6.1689,3.4769 6.169,3.3071 6.0316,3.1693 5.8618,3.169 Z m 3.134,0.1927 C 8.6455,3.3618 8.3616,3.6457 8.3614,3.996 8.3616,4.3463 8.6455,4.6303 8.9958,4.6304 9.3464,4.6308 9.6309,4.3467 9.631,3.996 9.6309,3.6454 9.3464,3.3613 8.9958,3.3617 Z M 5.7078,4.092 c -0.2974,0 -0.5384,0.241 -0.5384,0.5384 0,0.2974 0.241,0.5385 0.5384,0.5385 0.2974,0 0.5385,-0.2411 0.5385,-0.5385 C 6.2463,4.333 6.0052,4.092 5.7078,4.092 Z M 7.2803,4.5539 C 6.581,4.5565 6.0156,5.1242 6.0158,5.8234 6.016,5.9551 6.0367,6.086 6.0772,6.2113 5.9495,6.1834 5.8192,6.1693 5.6885,6.1692 4.6798,6.1694 3.8621,6.9871 3.8619,7.9958 3.8618,8.6902 4.2553,9.3246 4.8774,9.6331 4.7956,9.8419 4.7337,10.0579 4.6923,10.2784 4.3535,10.1805 4.0026,10.1311 3.6499,10.1311 c -0.5177,10e-5 -1.011,0.105 -1.4596,0.2948 -0.4486,0.1898 -0.475,0.5917 -0.2304,1.1113 0.4415,0.9378 1.2399,1.4636 2.1194,2.115 1.1641,0.8622 2.6284,1.288 5.1284,1.3442 3.0261,-0.9852 3.6558,-2.0102 5.1463,-4.0886 C 14.7527,9.9603 14.9653,9.3142 14.4753,9.107 13.9853,8.8997 13.4466,8.785 12.8812,8.785 12.3316,8.7851 11.7877,8.8958 11.2818,9.1106 10.6371,8.0262 9.469,7.3616 8.2075,7.3614 7.9463,7.3616 7.6859,7.3904 7.4309,7.4472 7.3918,7.3237 7.3396,7.2047 7.2753,7.0922 c 0.0031,0 0.0062,0 0.0093,0 0.7009,2e-4 1.2693,-0.5678 1.2696,-1.2688 2e-4,-0.7012 -0.5684,-1.2698 -1.2696,-1.2696 -0.0014,0 -0.0028,0 -0.0042,0 z m 4.6392,2.0385 c -0.5204,0 -0.9423,0.4219 -0.9423,0.9423 0,0.5205 0.4219,0.9424 0.9423,0.9424 0.5204,0 0.9423,-0.4219 0.9423,-0.9424 0,-0.5204 -0.4219,-0.9423 -0.9423,-0.9423 z"
style="fill:#ffffff;fill-opacity:1;stroke-width:0.516923;stroke-linecap:round;stroke-linejoin:round"
id="g873" />
<path
id="path837-1"
d="M 7.9999808,0.5 C 3.863565,0.5 0.5,3.8640014 0.5,8.0009255 0.5,12.135998 3.863565,15.5 7.9999808,15.5 12.136447,15.5 15.5,12.135998 15.5,8.0009255 15.5,3.8640014 12.136447,0.5 7.9999808,0.5 Z m 0,0.8976946 c 3.6507972,0 6.6024282,2.9501037 6.6024282,6.6032309 0,3.6512925 -2.951631,6.6032815 -6.6024282,6.6032815 -3.6507649,0 -6.602399,-2.951989 -6.602399,-6.6032815 0,-3.6531272 2.9516341,-6.6032309 6.602399,-6.6032309 z"
style="color:#000000;" />
</symbol>
</svg>
</head>
<body>
<div>
<svg width="40" height="40" ><use href="#my-symbol-name"></use></svg>
</div>
</body>
</html>
Bind external svg to data
Community,
I would like to bind an external svg file to my data-array.
I loaded the element into my dom like this:
defs = d3.select("defs");
d3.html("combisymbol.svg", function(data) {
//get a selection of the image so we can pull out the icon
xml = d3.select(data);
icon = document.importNode(xml.select("#star").node(), true);
icon.id = "staricon";
defs.node().appendChild(icon);
// console.log("icon", icon);
Then I tried to make it visible. I used the same approach as when I take circles that I bind to my data. With the circles it works, but my external svg is not visible.
d3.select("body").select("div#divCombiSVG")
.selectAll("star")
.data(combiData)
.enter()
.append("svg:use")
.attr("xlink:href", "#staricon");
I don't see the svgs.
I have also tried this:
d3.select("body").select("div#divCombiSVG")
.selectAll("star")
.data(combiData)
.enter()
.append("svg")
.attr("width",200)
.attr("height",200)
.node().appendChild(icon);
But then the icon gets only added to the first data-element and not the second. Even though it's added to the first, it's still not visible.
The svg file looks like this:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904 /DTD/svg10.dtd">
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 37.207 100" enable-background="new 0 0 37.207 100"
xml:space="preserve">
<path xmlns="http://www.w3.org/2000/svg" id="star" cx="50" cy="50" r="20" r2="43"
orient='point' points='3' radial-shift='0' outerCurve='86'
outerOffset='4.1' innerCurve='56' innerOffset='2.2' d="M300,168
C347.7790400396858,178.49361334198113
345.7070270919484,217.64466544113793 337.23909236273084,228.5
C350.87405522189334,226.59422068634012 385.8158673985199,244.3753308862077 371.014083110324,291
C338.0368273588341,327.1310557718112
305.1670281299449,305.76111387252195 300,293 C294.83297187005513,305.76111387252195
261.9631726411659,327.1310557718112 228.98591688967605,291 C214.1841326014801,244.37533088620776
249.12594477810666,226.59422068634015 262.7609076372691,228.50000000000003
C254.29297290805158,217.64466544113793 252.22095996031422,178.4936133419811 300,168 "
fill="yellow" stroke="black" stroke-width="2"></path>
</svg>
combiData currently has two objects.
I have looked for hours at other examples but I can't make it work. I think I'm close though...I'm pretty new to d3 (but very motivated) so please be patient with me. :-)
Thanks in advance for your help!
In the first case, you are doing a .selectAll('star') (searching for the tag star), which probably should have been a .selectAll('#star') (searching for a tag with id star).
Your second approach can be tweaked a little to work as well. Calling node() on a d3 selection always returns just one node. Hence, the subsequent .appendChild happens only on the first node.
You can try this, if you find this more amenable to what you wanted to do:
d3.select("body").select("div#divCombiSVG")
.selectAll("star")
.data(combiData)
.enter()
.append("svg")
.attr("width",200)
.attr("height",200)
.each(function (d) {
this.appendChild(icon);
});
Since in the comments you asked for which option to prefer: I would recommend the first approach of using the use element. It results in less code and you can even refer to the file containing the star externally which means that you will not have to download and inline the SVG yourself (note the caveat about IE).
How to put text inside of a SVG Shape
Just wondering how I would put text inside of the following code in SVG? <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="8000" height="3859" viewBox="0 0 8000 3859"> <g id="Australian Capital Territory"> <path d='M7309.2520970 2655.9737271L7309.1225992 2655.9244070L7308.8019058 2655.7330585L7308.7090199 2655.6527227L7308.5551142 2655.4676452L7305.7285369 2652.0430337L7305.6607371 2651.9503255L7305.1115580 2650.6791888L7305.1481699 2647.5938860L7305.1732559 2647.1433952L7305.8458307 2643.8975903L7305.8824427 2643.7803067L7305.9441406 2643.6630232L7306.0675364 2643.4842166L7306.2221201 2643.3052406L7306.5923075 2643.0027101L7307.3204783 2642.5462873L7312.0535883 2639.7816499L7314.5533701 2640.5899233L7314.5411661 2640.7443240L7314.5533701 2640.8924538L7314.5838801 2641.0032969L7314.7445658 2641.1700701L7315.8117360 2642.1264732L7317.0646779 2642.6388260L7317.2131596 2642.6757737L7317.3799474 2642.6942476L7317.5460571 2642.6820447L7317.8545466 2642.7374662L7319.1447784 2643.3237144L7319.2559702 2643.3854069L7319.3237701 2643.4964195L7319.1698644 2643.6569217L7318.8613749 2643.8913193L7318.4410156 2644.1321573L7318.3237218 2644.1875789L7318.1752400 2644.2307975L7318.0091303 2644.2246961L7317.4226613 2644.0702954L7316.4476989 2643.9345380L7316.2626052 2643.9284365L7315.9792017 2643.9963999L7314.7133778 2644.4528227L7314.6028640 2644.5084138L7314.4109903 2644.6565436L7314.2509826 2644.8355196L7313.5045059 2645.7426027L7313.3621261 2645.9214092L7312.1891881 2649.7412595L7312.1647801 2649.8770169L7312.1586781 2650.0127743L7312.1830861 2650.2966615L7312.3064819 2650.7841000L7312.5966654 2652.4440349L7312.6583633 2654.5729345L7312.5410695 2655.1159641L7312.4549636 2655.3505312L7311.4616953 2656.5289595L7311.3688095 2656.6031939L7311.2332097 2656.6464126z' fill='blue' stroke='black' /> </g> So with this example I would like to write Australian Capital Territory in it. And I would like to be able to add other states with there names in there shapes as well. Any help I would be grateful for. Hodds.
Use the <text> element (view on JS Bin): <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="7300 2639.25 30 17.90625"> <g id="AustralianCapitalTerritory"> <path d='M7309.2520970 2655.9737271L7309.1225992 2655.9244070L7308.8019058 2655.7330585L7308.7090199 2655.6527227L7308.5551142 2655.4676452L7305.7285369 2652.0430337L7305.6607371 2651.9503255L7305.1115580 2650.6791888L7305.1481699 2647.5938860L7305.1732559 2647.1433952L7305.8458307 2643.8975903L7305.8824427 2643.7803067L7305.9441406 2643.6630232L7306.0675364 2643.4842166L7306.2221201 2643.3052406L7306.5923075 2643.0027101L7307.3204783 2642.5462873L7312.0535883 2639.7816499L7314.5533701 2640.5899233L7314.5411661 2640.7443240L7314.5533701 2640.8924538L7314.5838801 2641.0032969L7314.7445658 2641.1700701L7315.8117360 2642.1264732L7317.0646779 2642.6388260L7317.2131596 2642.6757737L7317.3799474 2642.6942476L7317.5460571 2642.6820447L7317.8545466 2642.7374662L7319.1447784 2643.3237144L7319.2559702 2643.3854069L7319.3237701 2643.4964195L7319.1698644 2643.6569217L7318.8613749 2643.8913193L7318.4410156 2644.1321573L7318.3237218 2644.1875789L7318.1752400 2644.2307975L7318.0091303 2644.2246961L7317.4226613 2644.0702954L7316.4476989 2643.9345380L7316.2626052 2643.9284365L7315.9792017 2643.9963999L7314.7133778 2644.4528227L7314.6028640 2644.5084138L7314.4109903 2644.6565436L7314.2509826 2644.8355196L7313.5045059 2645.7426027L7313.3621261 2645.9214092L7312.1891881 2649.7412595L7312.1647801 2649.8770169L7312.1586781 2650.0127743L7312.1830861 2650.2966615L7312.3064819 2650.7841000L7312.5966654 2652.4440349L7312.6583633 2654.5729345L7312.5410695 2655.1159641L7312.4549636 2655.3505312L7311.4616953 2656.5289595L7311.3688095 2656.6031939L7311.2332097 2656.6464126z' fill='blue' stroke='black'/> <text x="7300" y="2648" font-size="2" fill="white" stroke="black" stroke-width=".06">Australian Capital Territory</text> </g> </svg> I adjusted two unrelated things in your SVG: Adjusted the viewBox so that one could actually see the image. width and height can be set to anything you like for scaling the image. Australian Capital Territory is an invalid ID, changed that to AustralianCapitalTerritory