Related
I have the following svg that presents a logo but I want to generate a .pdf where it's only present the logo and not the code of this specific cell, how can I do that?
The svg:
%%html
<svg width="529" height="265" xmlns="http://www.w3.org/2000/svg" xmlns:undefined="http://www.inkscape.org/namespaces/inkscape">
<g>
<title>Layer 1</title>
<metadata id="svg_14">image/svg+xml</metadata>
<g>
<metadata id="svg_9">image/svg+xml</metadata>
<g transform="matrix(1.33333 0 0 -1.33333 0 468.32)" id="svg_2">
<g transform="translate(0 -76.2875) scale(0.1 0.1)" id="svg_3">
<!-- uminho symbol + red background -->
<path fill-rule="nonzero" fill="#a42a3c" id="svg_7" d="m0,2291.02528l1984.25,0l0,1984.25l-1984.25,0l0,-1984.25"/>
<!-- uminho symbol -->
<path fill-rule="nonzero" fill="#ffffff" id="svg_6" d="m1502.43,3514.55528l-378.95,-220.62c-68.8,-39.71 -129.285,64.76 -60.48,104.49l379,220.52c68.88,39.76 129.16,-64.71 60.43,-104.39m-1039.617,-1.46l383.14,-217.25c68.711,-39.66 129.059,64.89 60.172,104.67l-383.203,217.16c-68.77,39.7 -128.938,-64.84 -60.109,-104.58m459.449,-797.92l-0.047,440.75c0,33.37 27.109,60.33 60.379,60.33c33.336,0 60.336,-27.01 60.336,-60.34l-0.05,-440.74c0,-33.28 -26.92,-60.34 -60.286,-60.33c-33.321,0 -60.332,27.01 -60.332,60.33m-379.258,235.44l184.039,104.36c68.863,39.77 8.461,144.3 -60.289,104.6l-183.996,-104.46c-68.774,-39.72 -8.574,-144.24 60.246,-104.5m918.046,-3.45l-179.19,108.08c-68.78,39.7 -8.28,144.18 60.55,104.43l179.14,-108.16c68.72,-39.67 8.4,-144.12 -60.5,-104.35m-478.495,964.28c-33.371,0 -60.293,-27.05 -60.293,-60.33l-0.047,-211.59c0,-33.32 27.012,-60.34 60.34,-60.34c33.265,0 60.375,26.98 60.375,60.34l-0.05,211.59c0,33.32 -27,60.33 -60.325,60.33"/>
<!-- ec symbol + blue background -->
<path fill-rule="nonzero" fill="#8cbce8" id="svg_5" d="m1984.25,2291.02528l1984.26,0l0,1984.25l-1984.26,0l0,-1984.25"/>
<!-- ec symbol -->
<path fill-rule="nonzero" fill="#ffffff" id="svg_4" d="m3540.85,3037.67528l-100.97,183.1c-39.72,68.79 -144.26,8.6 -104.58,-60.12l101.07,-183.06c39.74,-68.84 144.12,-8.57 104.48,60.08m-17.75,558.93c0,33.34 -27.02,60.24 -60.29,60.24l-211.41,0.05c-33.3,0 -60.28,-27 -60.28,-60.29c0,-33.25 26.94,-60.34 60.28,-60.34l211.41,0.05c33.31,0 60.29,26.99 60.29,60.29m-362.52,-738.96c16.65,28.85 6.78,65.71 -22.07,82.36c-28.87,16.67 -65.68,6.72 -82.31,-22.09l-105.75,-183.06c-16.65,-28.84 -6.77,-65.71 22.07,-82.36c28.79,-16.62 65.73,-6.83 82.4,22.04l105.66,183.11zm-150.24,974.55c16.66,28.85 6.77,65.71 -22.06,82.36c-28.88,16.67 -65.69,6.72 -82.32,-22.09l-105.75,-183.06c-16.65,-28.84 -6.76,-65.71 22.07,-82.36c28.8,-16.62 65.73,-6.83 82.4,22.05l105.66,183.1zm-241.49,-862.5c0,33.25 -26.96,60.34 -60.29,60.34l-211.42,-0.05c-33.29,0 -60.29,-27 -60.29,-60.29c-0.01,-33.35 27.04,-60.24 60.29,-60.24l211.4,-0.05c33.31,0 60.31,26.99 60.31,60.29m-146.85,428.75l-105.75,183.06c-16.63,28.81 -53.44,38.76 -82.31,22.09c-28.84,-16.65 -38.72,-53.51 -22.07,-82.36l105.66,-183.1c16.67,-28.88 53.61,-38.67 82.4,-22.05c28.83,16.65 38.72,53.52 22.07,82.36"/>
</g>
</g>
</g>
</g>
</svg>
The Output is this one:
Thanks in advance.
R.: One of the options I have is convert the svg to a png and put it there but I would like to not do that extra step.
By far the simplest way to convert SVG to PDF is via HTML, so I suggest you add enough HTML wrapping to control the output. Here we can see the normal HTML placement would include lots of other page data which of course you may add as you wish. One gotcha is of course units so you may need to introduce scaling factors but that is way beyond this simple demonstration of how to show and convert SVG-to-PDF
The first step is wrapping the SVG with the HTML (and this is overkill) but I simply used your Minimal !! SVG for cut and paste in a template as proof of concept.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- saved from url=https://stackoverflow.com/questions/70731953 -->
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>None</title>
<meta name="GENERATOR" content="KJs Template Builder V 2022-01">
<meta http-equiv="Content-Style-Type" content="text/css"><style>
#media print {
#page {
/* For different margins – use the standard CSS margin property: north, east, south, west, here it is one value */
margin: 0;
/* Browser default, customisable by the user if using the print dialogue. */
size: auto;
/* Default, In my instance of Edge, this is a vertical or horizontal A4 format, but you might find something different depending on your locale. */
size: portrait;
/* Different width and height. here using stated width="529" height="265" can be px or pt or cm. For square, just use one value or use name like A6 landscape; note this is over-riding both above size: */
size: 529px 265px;
}
body { margin: 0; }
}
</style>
</head><body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<svg width="529" height="265" xmlns="http://www.w3.org/2000/svg" xmlns:undefined="http://www.inkscape.org/namespaces/inkscape">
<g>
<title>Layer 1</title>
<metadata id="svg_14">image/svg+xml</metadata>
<g>
<metadata id="svg_9">image/svg+xml</metadata>
<g transform="matrix(1.33333 0 0 -1.33333 0 468.32)" id="svg_2">
<g transform="translate(0 -76.2875) scale(0.1 0.1)" id="svg_3">
<!-- uminho symbol + red background -->
<path fill-rule="nonzero" fill="#a42a3c" id="svg_7" d="m0,2291.02528l1984.25,0l0,1984.25l-1984.25,0l0,-1984.25"/>
<!-- uminho symbol -->
<path fill-rule="nonzero" fill="#ffffff" id="svg_6" d="m1502.43,3514.55528l-378.95,-220.62c-68.8,-39.71 -129.285,64.76 -60.48,104.49l379,220.52c68.88,39.76 129.16,-64.71 60.43,-104.39m-1039.617,-1.46l383.14,-217.25c68.711,-39.66 129.059,64.89 60.172,104.67l-383.203,217.16c-68.77,39.7 -128.938,-64.84 -60.109,-104.58m459.449,-797.92l-0.047,440.75c0,33.37 27.109,60.33 60.379,60.33c33.336,0 60.336,-27.01 60.336,-60.34l-0.05,-440.74c0,-33.28 -26.92,-60.34 -60.286,-60.33c-33.321,0 -60.332,27.01 -60.332,60.33m-379.258,235.44l184.039,104.36c68.863,39.77 8.461,144.3 -60.289,104.6l-183.996,-104.46c-68.774,-39.72 -8.574,-144.24 60.246,-104.5m918.046,-3.45l-179.19,108.08c-68.78,39.7 -8.28,144.18 60.55,104.43l179.14,-108.16c68.72,-39.67 8.4,-144.12 -60.5,-104.35m-478.495,964.28c-33.371,0 -60.293,-27.05 -60.293,-60.33l-0.047,-211.59c0,-33.32 27.012,-60.34 60.34,-60.34c33.265,0 60.375,26.98 60.375,60.34l-0.05,211.59c0,33.32 -27,60.33 -60.325,60.33"/>
<!-- ec symbol + blue background -->
<path fill-rule="nonzero" fill="#8cbce8" id="svg_5" d="m1984.25,2291.02528l1984.26,0l0,1984.25l-1984.26,0l0,-1984.25"/>
<!-- ec symbol -->
<path fill-rule="nonzero" fill="#ffffff" id="svg_4" d="m3540.85,3037.67528l-100.97,183.1c-39.72,68.79 -144.26,8.6 -104.58,-60.12l101.07,-183.06c39.74,-68.84 144.12,-8.57 104.48,60.08m-17.75,558.93c0,33.34 -27.02,60.24 -60.29,60.24l-211.41,0.05c-33.3,0 -60.28,-27 -60.28,-60.29c0,-33.25 26.94,-60.34 60.28,-60.34l211.41,0.05c33.31,0 60.29,26.99 60.29,60.29m-362.52,-738.96c16.65,28.85 6.78,65.71 -22.07,82.36c-28.87,16.67 -65.68,6.72 -82.31,-22.09l-105.75,-183.06c-16.65,-28.84 -6.77,-65.71 22.07,-82.36c28.79,-16.62 65.73,-6.83 82.4,22.04l105.66,183.11zm-150.24,974.55c16.66,28.85 6.77,65.71 -22.06,82.36c-28.88,16.67 -65.69,6.72 -82.32,-22.09l-105.75,-183.06c-16.65,-28.84 -6.76,-65.71 22.07,-82.36c28.8,-16.62 65.73,-6.83 82.4,22.05l105.66,183.1zm-241.49,-862.5c0,33.25 -26.96,60.34 -60.29,60.34l-211.42,-0.05c-33.29,0 -60.29,-27 -60.29,-60.29c-0.01,-33.35 27.04,-60.24 60.29,-60.24l211.4,-0.05c33.31,0 60.31,26.99 60.31,60.29m-146.85,428.75l-105.75,183.06c-16.63,28.81 -53.44,38.76 -82.31,22.09c-28.84,-16.65 -38.72,-53.51 -22.07,-82.36l105.66,-183.1c16.67,-28.88 53.61,-38.67 82.4,-22.05c28.83,16.65 38.72,53.52 22.07,82.36"/>
</g>
</g>
</g>
</g>
</svg>
</body></html>
Now we need a means to send the content to a PDF writer and here I use Edge but you can of course use Chrome. On Windows you may need to run that as Admin, it should only take a few seconds even on a slow 32bit win 7 device as I am currently on.
Note older windows may need --disable-gpu but should not now be needed since 7 is expired.
"C:\Program Files\Microsoft\Edge\Application\msedge.exe" --headless --run-all-compositor-stages-before-draw --print-to-pdf="%USERPROFILE%\desktop\OUTlogo.pdf" --print-to-pdf-no-header "%USERPROFILE%\Desktop\Logo.html"
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.
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>
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>
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