CODEWITHSUNDEEP
asp.nethtmlc#-4.0svg
DevT
DevT

Reputation: 4933

Export the HTML5 svg tags to image c#

I have aspx file and it contain <svg>. i want to save this svg as image. I searched lot but couldn't find proper answer for this.

eg:

<body>
    <form id="form1" runat="server">
        <div>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="mycanvas">
                <rect width="300" height="100" style="fill: rgb(0,0,255); stroke-width: 1; stroke: rgb(0,0,0)" />
            </svg>
        </div>
        <input id="Submit2" type="submit" value="submit2" onclick="test2()" />
        <asp:Button ID="BtnDotNew" runat="server" Text="Convert" OnClick="BtnDotNew_Click" />
    </form>
</body>

how can i do this?

EDIT: I tried as follows:

    function test2() {
        canvg(document.getElementById('drawingArea'), document.getElementById("mycanvas").innerHTML)

        canvg('canvas', 'file.svg', { ignoreMouse: true, ignoreAnimation: true })
    }

but in this situation document.getElementById("mycanvas").innerHTML value mentioned as undefined

Upvotes: 0

Views: 1887

Answers (1)

Aditya Singh
Aditya Singh

Reputation: 9612

Try this out:- SVG to Canvas to Image Conversion

Initial conversion of SVG to Canvas is done using https://code.google.com/p/canvg/

//load '../path/to/your.svg' in the canvas with id = 'canvas'

canvg('canvas', '../path/to/your.svg')

//load a svg snippet in the canvas with id = 'drawingArea'

canvg(document.getElementById('drawingArea'), '<svg>...</svg>')

//ignore mouse events and animation

canvg('canvas', 'file.svg', { ignoreMouse: true, ignoreAnimation: true })

And the canvas is then converted into png image using toDataURL() which returns the content of the current canvas as an image that you can use as a source for another canvas or an HTML element.

Upvotes: 2

Related Questions