All geek questions in one place

Avoid rasterizing with svg image to convert work in Firefox

I want to apply matrix transform to svg . Here is the violin . In Firefox, it looks like this:

Blurry transform on firefox

It looks like it rasterizes it to a 10x10 bitmap before converting it due to my viewport. How can i avoid this?

As I see this, I can try to find a way to make Firefox not rasterize or use some form of attachment. ( <embed> ? <object> ? iframe ? I thought it was bad practice for one reason or another.) I load these SVGs dynamically using JavaScript. How can I do this, then?

PS: If there is a way with svg.js , then what I'm using now, but I'm more than ready to go vanilla, just to make it work.

EDIT: FWIW, apparently it is fixed in the Firefox night browser, but I would still like to find a solution; I'll be pumped out soon. (I also realized that I did not indicate that it works in Chrome and IE)

+6
source share
1 answer

The workaround is to increase the size of the "original size" and adjust the transformation to reduce the scale by the same factor.

 <svg viewbox="0 0 20 20"> <image xlink:href="https://www.adobe.com/inspire-apps/exporting-svg-illustrator-0913/fig11/img/napoleon%20for%20svg%201.svg" width="100" height="100" transform="matrix(0.1, 0.02, 0.02, 0.1, 1, 2)" /> </svg>
+3
source

Source: https://habr.com/ru/post/988344/

More articles:


All Articles