Inline SVG not rendering in the output

[AshwinTayson]

I'm using rasterizeHTML to convert my WYSIWYG editor to image. So far so good. But when I'm trying to convert the artboard with inline SVG, the images doesn't get generated. A sample SVG code I'm using is given below

<svg width="300px" height="300px" viewBox="0 0 100 100" preserveAspectRatio="none"> <ellipse fill="#fff" stroke="#231F20" stroke-width="0.5" stroke-miterlimit="10" stroke-dasharray="2" cx="50" cy="50" rx="40.54" ry="40.584"></ellipse> </svg>

Is there any code change that can be done to import the SVG to the canvas? The SVG is hardcoded and not from a cross-origin. Or is there any workaround for this.

[cburgmer]

SVGs generally should work. Possibly you are facing a cross-browser issue. Your example works fine for me in Firefox.

You can easily debug yourself though. Using https://github.com/cburgmer/rasterizeHTML.js/wiki/API#return-value you can get hold of the internal SVG representation of your rendered content. Once you've obtained that you can reduce/tweak the representation and draw this to a canvas to verify where it starts breaking.

Let me know any findings, or if I can help further.

[AshwinTayson]

I've tried debugging as you've said, I made a workaround for SVG but I ran into another problem. I've attached the screenshot of the output that I've got. The left side of image is the svg output, the middle one is my editor, the right one is the canvas it is outputted to. As you can see the canvas doesn't render the fonts correctly. Whatever font family I use, the output font-family in the canvas is always serif. In the SVG output you can see the fonts are scaled a little bit. Is there any extra code to include the fonts to the canvas? Or is there any inline styling that needs to be added to the div?

[cburgmer]

Thanks for the screenshot! I think you might be describing #166.

For your original issue, can you describe the work around. Assuming this is a shortcoming of the library we need to tackle.

[AshwinTayson]

Here is the fiddle I have created. I have attached a small piece of working code to give an idea about the issue.

http://jsfiddle.net/1ehf7zs3/5/

I read the issue describing #166 this, I couldn't understand what kind of workaround or solution is posted. Can you describe these in detail?

[AshwinTayson]

Hello, I tried loading the font using webfont loader by Google. Still it doesn't get updated in the canvas. I have updated the fiddle for 3 different fonts with background color. On my development environment I'm not getting the background color in the canvas but it appears in the SVG. This seems like a different issue. Need your input on this.

http://jsfiddle.net/1ehf7zs3/8/

[cburgmer]

Thanks, will get back once I find some time!

[cburgmer]

Sorry for the long delay.

I've added a single line and I can now see the Knewave font rendering correctly in the canvas: http://jsfiddle.net/1ehf7zs3/9/

The line is <link href="https://fonts.googleapis.com/css?family=Knewave" rel="stylesheet">

The issue you are facing, I think, stems from a misunderstanding of how the canvas is filled. The process of loading all the fonts via WebFont.load() has no effect on the canvas itself, as the Webfont is not embedded in the HTML that you are passing to the library. The way rasterizeHTML is designed (possibly with exceptions) is to work independently of the context of the page it is embedded in. So anything you add to the outer page (which WebFont.load() is basically doing), should have no effect at all.

Does this answer your question fully and solve your problem?

[cburgmer]

Closing this for now, please re-open if you are still facing this issue!