Download SVG with image and patterns as PDF

Question

I have a SVG with image and patterns applied on rects, how to download the whole thing as a PDF using javascript?

here is my code: http://jsfiddle.net/dnuboz21/5/

<div class="feature">
<svg style="height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;">
    <image width="980" height="600" xlink:href="http://en.hdyo.org/assets/art-shutter-young-people-a12e2c0cd7a54920cb024fd1394190fd.jpg" clip-path="url(#svg-mask)" />
    <defs>
        <pattern width="1" height="1" id="pat1" viewBox="325 110 150 150" preserveAspectRatio="xMidYMid slice">
            <image width="980" height="652" xlink:href="http://en.hdyo.org/assets/art-shutter-young-people-a12e2c0cd7a54920cb024fd1394190fd.jpg" style="filter:url(#svg-blur);" />
        </pattern>
        <filter id="svg-blur">
            <feGaussianBlur stdDeviation="10" />
        </filter>
    </defs>
    <rect x="325" y="110" rx="40" ry="40" width="150" height="150" style="fill:url('#pat1');stroke:red;stroke-width:5;" />
</svg>

Answer 1

You can't just download it as PDF. To create PDF you need a PDF tool like:

• http://d3export.housegordon.org/
• https://parall.ax/products/jspdf
• http://www.wikihow.com/Create-PDF-Files
• Embedding SVG in PDF (exporting SVG to PDF using JS)

For more, search for example Google create pdf with browser

Another option would be to just print it. Many of today's browser has the option to print to PDF.

• Print directly from browser without print popup window
• https://superuser.com/questions/161313/print-a-huge-svg