How to only present output in Google Colaboratory? - svg
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"
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.
SVG masks, using one shape's coordinates to partially mark another shape
I have a series of opaque svg paths that overlap eachother. I want to create a mask based on each shape's previous sibling to mask the overlap. My problem is that in a case where I have to shapes (fiddle below) the mask based on shape 0 completely removes shape 1 I'm a bit new at SVG, but it was my understanding that the mask "punches a hole" in its coordinates when applied. I expected the mask to remove anything in shape 1 that shares coordinates with shape 0, not completely hiding it. What am I doing wrong? https://jsfiddle.net/nazhgvL6/3/ <svg pointer-events="none" width="1558" height="1163" viewBox="-130 -97 1558 1163" style="transform: translate3d(-330px, -497px, 0px) scale(1);"> <defs> <!-- #mask-shape-1 d attribute is the same as the d attribute of the shape 0 path--> <mask id="mask-shape-1"> <!-- rename ID to turn mask on/off --> <path d="M779 780L779 767L775 741L771 728L760 704L746 682L737 672L717 655L682 636L656 629L630 627L604 636L582 648L563 664L555 673L543 692L529 709L515 737L510 758L508 779L516 799L526 817L539 831L562 847L571 862L592 881L601 887L619 895L630 898L650 897L670 891L689 883L707 871L714 864L733 852L742 844L757 826L764 816L775 792z" fill="white"></path> <path d="M779 780L779 767L775 741L771 728L760 704L746 682L737 672L717 655L682 636L656 629L630 627L604 636L582 648L563 664L555 673L543 692L529 709L515 737L510 758L508 779L516 799L526 817L539 831L562 847L571 862L592 881L601 887L619 895L630 898L650 897L670 891L689 883L707 871L714 864L733 852L742 844L757 826L764 816L775 792z" rx="5" fill="black"></path>" </mask> </defs> <g> <!-- shape 0 --> <path class="arrival-lines-polygon-fill leaflet-interactive" stroke="none" fill="red" fill-opacity="0.2" d="M779 780L779 767L775 741L771 728L760 704L746 682L737 672L717 655L682 636L656 629L630 627L604 636L582 648L563 664L555 673L543 692L529 709L515 737L510 758L508 779L516 799L526 817L539 831L562 847L571 862L592 881L601 887L619 895L630 898L650 897L670 891L689 883L707 871L714 864L733 852L742 844L757 826L764 816L775 792z" mask="url(#mask-shape-0)"></path> <!-- shape 1 --> <path class="arrival-lines-polygon-fill leaflet-interactive" stroke="none" fill="red" fill-opacity="0.2" d="M562 849L522 810L495 770L485 749L482 738L483 715L489 693L498 671L504 661L541 613L573 588L599 576L614 572L643 575L657 578L684 588L697 595L709 603L731 622L749 644L756 656L768 683L772 696L777 731L779 760z" mask="url(#mask-shape-1)"></path> </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>
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
How do I scale an SVG that has some complex path definitions?
I have an SVG whose code is like what follows: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150px" height="150px" preserveAspectRatio="xMinYMin meet" viewBox="0 0 150 155" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g id="g11" transform="matrix(1.25,0,0,-1.25,-100.0791,954.14501)"> <g id="g3186" transform="translate(6.3490095,-13.703287)"> <path d="..."></path> <path d="..."></path> <path d="..."></path> <path d="..."></path> </g> </g> </svg> The "original" dimensions of the SVG generate an image is that is 300px by 310px. I want to scale the image as a whole, let's say by 50%. I've tried a variety of ways to scale the image, but the best I've accomplished is to simply clip or "crop" the original image to a region that is 50% of the original dimensions. Using preserveAspectRatio, setting the viewbox, trying to use transform="scale(0.5"), etc. have not worked. All I want to do is scale the original dimensions by 50%.
transform="scale(0.5)" should definitely work. You're probably doing something else wrong. Try wrapping g11 in another g with transform="scale(0.5)" and remove the preserveAspectRatio and viewBox
Here is an example of how I'm doing it
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<!-- this came from Open Clip Art http://openclipart.org/tags/svg
I just took the bits inside the g tag and gave them an id -->
<svg xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<g id="factory2">
<g id="layer1" transform="translate(-190.12 -497.04)">
<path id="path3019" d="m260.18 638.49c-12.375-0.3028-33.202-0.51166- 46.283-0.46413l-23.783 0.0864 0.54057-2.5363c0.29731-1.3949 0.72336-10.785 0.94678-20.867 0.22343-10.082 0.61582-18.541 0.87198-18.797 0.6619-0.66189 5.5186 2.3677 12.539 7.8218l6.0422 4.6941 2.6179-4.6941c1.4398-2.5818 3.2323-5.8073 3.9833-7.1678 0.75098-1.3605 1.8059-2.6205 2.3442-2.7999 0.53833-0.17944 3.4031 1.6087 6.3662 3.9737 14.183 11.32 13.44 10.876 15.062 9.0051 0.81257-0.93784 2.5493-4.5177 3.8593-7.9552 1.3101-3.4375 2.6092-6.2494 2.887-6.2486 0.2778 0.00077 4.2211 3.6008 8.7629 8s8.6861 7.9986 9.2095 7.9986c1.661 0 5.5112-4.8335 7.5569-9.4868 1.0867-2.4718 2.2704-4.4985 2.6305-4.5037 0.36009-0.005 4.9112 4.2194 10.114 9.3881l9.4588 9.3976-0.36231 12.268c-0.19928 6.7473-0.57659 12.482-0.83847 12.744-0.71531 0.7153-9.6348 0.75231-34.526 0.14325zm-53.812-3.6334c-0.72187-0.28887-1.5844-0.25335-1.9167 0.0789-0.33229 0.33229 0.25834 0.56864 1.3125 0.52522 1.165-0.048 1.4019-0.28494 0.60417-0.60416zm52.618-13.034c0.27612-3.8066 0.0559-4.2797-2.2628-4.8616-1.4128-0.35458-4.5879-0.34189-7.0559 0.0282-4.4272 0.66389-4.4872 0.72466-4.4872 4.5421 0 4.3193 0.69024 4.6694 9 4.5649l4.5-0.0566 0.30588-4.2169zm-34.556 2.4532c-0.1375-0.40496-0.25-2.3113-0.25-4.2363v-3.5h-13v7.8954l5.25 0.37628c6.7165 0.48138 8.3091 0.37478 8-0.53546zm17.25-3.2363v-4l-6.75-0.29569-6.75-0.29569v3.879c0 2.1335 0.31903 4.1981 0.70896 4.588 0.38993 0.38992 3.4274 0.57742 6.75 0.41666l6.041-0.29229v-4zm32.5 0.5v-4h-12v8h12v-4zm16.267 0.75c0.27194-1.7875 0.29645-3.5875 0.0545-4-0.24197-0.4125-3.3384-0.75-6.8809-0.75h-6.441v8h12.773l0.49443-3.25zm-82.457-1.5-0.31037-3.75h-5.7837c-4.0517 0-6.0685-0.44918-6.7347-1.5-0.67184-1.0597-0.95549 0.0411-0.96631 3.75l-0.0153 5.25h14.121l-0.31036-3.75zm13.69-19.25c-0.33992-0.55-1.068-1-1.618-1s-0.72189 0.45-0.38197 1 1.068 1 1.618 1 0.72189-0.45 0.38197-1zm-13.665-0.75c-1.26-1.4949-1.4649-9.1853-1.405-52.75l0.0701-51 3.3219 0.15527c1.8271 0.0854 3.5772 0.4105 3.8891 0.72245 0.31195 0.31195 0.73146 10.142 0.93225 21.845 0.2008 11.703 0.79871 30.278 1.3287 41.278 1.2527 26.001 0.96626 31.906-1.8072 37.25-2.3841 4.5942-4.0201 5.2403-6.33 2.5zm27.665-1.9051c-1.1986-2.8686-1.388-5.8273-0.88023-13.75 0.35583-5.5522 0.69953-20.895 0.76378-34.095 0.12983-26.675 0.48916-28.507 4.9502-25.245 1.5369 1.1238 1.7803 4.6464 2.3358 33.807 0.55628 29.202 0.44258 33.086-1.1049 37.745-2.0404 6.1432-3.9393 6.6248-6.0646 1.5383z"/>
</g>
</g>
</defs>
</svg>
<script type="text/javascript">
var svg = d3.select("svg") .append("g");
var nodes = [{ name: "1", type: 'factory2' }];
var node = svg.selectAll("node")
.data(nodes)
.enter()
.append("g")
.attr({
dx:50, dy:50, width:50, height:50,
// here's the magic
transform:"scale(0.5)"
});
node.append("use")
.attr({
"xlink:href": "#factory2"
});
</script>
</body>
</html>