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"
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>