How to Include CSS style when converting svg to png

by

Question 1 (first half): what’s the real reason (is the GPU acceleration related in anyway?)

No, GPU acceleration has nothing to do with it.
The broadest reason is privacy.

To draw your svg with drawImage you have to load your svg as an external document inside an <img> tag. SVG can be quite a complex image format for resources loading (it can literally require any kind of resource that could be required by any HTML document). Thus, it has been stated in specs that the same security as the one for <iframe> elements or <object> or similar ones should apply to <img> content and even stricter :

<img> content can not require any external resources, nor access to the main document.

Question 1 (second half): and the solution for this issue

You pointed to some SO questions already answering it, you could also just include all the stylesheets from the main document inside a <style> tag inside your parsed svg Node, before you do create the Blob from it. dumb implementation here

Question 2 : “how i still overcome this issue when using a custom font with Fontface”

For external resources, you have to encode it as dataURI, and include it in your svg node before you create the Blob. For font in particular, you’d set a font-face property in a <style> element.

So at the end, your svg would have something like

<defs>
  <style>
    /* all your parsed styles in here */
    @font-face {
     font-family: foo;
     src: url('data:application/font-woff;charset=utf-8;base64,...')
    }
  </style>
</defs>

in itself before you do extract its markup.

More Related Contents:

  1. Changing three.js background to transparent or other color
  2. img src SVG changing the styles with CSS
  3. Transparent hollow or cut out circle
  4. Inline SVG in CSS
  5. Canvas has white space at the bottom and scrolls too far
  6. SVG animation is not working on IE11
  7. CSS transparent curved shape with two rounded sides
  8. SVG USE element and :hover style
  9. How to animate handwriting text on the web page using SVG?
  10. How to create a curve on the top of a background?
  11. Specify an SVG as a background image and ALSO style the SVG in CSS?
  12. Outlining and partially filling an SVG Shape
  13. Can I change the fill color of an svg path with CSS?
  14. SVG gradient using CSS
  15. SVG in img element proportions not respected in ie9
  16. Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)
  17. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  18. CSS: Using raw svg in the URL parameter of a background-image in IE
  19. How can I animate a progressive drawing of svg path?
  20. How do I include a font awesome icon in my svg?
  21. How can I change the color of an ‘svg’ element?
  22. How to add animated gradient to an svg path?
  23. Filling water animation
  24. Fill only Half a star with SVG
  25. SVG Fill not being applied in FireFox
  26. How can I animate the drawing of text on a web page?
  27. Using SVG as background image
  28. Tint image using CSS without overlay
  29. There is a 4px gap below canvas/video/audio elements in HTML5
  30. Canvas is stretched when using CSS but normal with `width` & `height` attributes

Leave a Comment