How to attach style when convert svg to image

Asked May 29 '15 at 22:55

Active May 29 '15 at 22:55

Viewed 127 times

All:

Right now, I want to draw a svg and style it with external style. Everything goes well until I try to down load it:

function chartExporter(svg){
    // svg is a D3 object
    svg.attr("version", 1.1)
        .attr("xmlns", "http://www.w3.org/2000/svg");
    var svgDOM = svg.node();
    var html = svgDOM.outerHTML;
    var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
    imgobj.src = imgsrc;
    imgobj.onload = function(){
        var a = document.createElement("a");
        a.download = "sample.svg";
        a.href = imgsrc;
        a.click();
    }
}

The problem here is: If I use D3 to add inline style or attributes, the svg downloaded seems good, but if I use external css file to include style, those styles can not be applied to svg when converted( it make sense, cos they are not in that html string), I wonder how to bring those style into svg?

Thanks

asked May 29 '15 at 22:55

Kuan

11,149
23
93
201

@RobertLongson Thanks, that is why I ask this question that how to bring those external style into one single file( if this is the only way) – Kuan May 29 '15 at 23:31
Convert the style to an internal data url. – Robert Longson May 29 '15 at 23:32
@RobertLongson Could you show me how to do that, I am pretty new to that – Kuan May 29 '15 at 23:32
http://en.wikipedia.org/wiki/Data_URI_scheme – Robert Longson May 29 '15 at 23:42
@RobertLongson I thought I already done that: var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html); Or did you mean something else? – Kuan May 29 '15 at 23:52
I meant the stylesheet, since that's what this question seems to be about. – Robert Longson May 30 '15 at 00:03
@RobertLongson I finally find some solution for this, not understand why but work, http://spin.atomicobject.com/2014/01/21/convert-svg-to-png/ – Kuan May 30 '15 at 00:20
Step 1 in that code converts stylesheets to data URIs. – Robert Longson May 30 '15 at 06:32

How to attach style when convert svg to image

0 Answers0