Wow! I just fiddled with it a little bit and it seems very useful for when I finally decide to tackle the small problems[1] that I encounter with the SVG's that I use. The UI is easy to understand and it gives clear feedback on changes. I definitely bookmarked this.
[1] The problems that I had with some SVG's is that they seemed to stretch the page wide while loading (in a flash) and then finally settling on their intended size after a split second. I remember that I searched for solutions and fiddled with viewbox, widht and height, but to no avail (they were in the hundreds of pixels). What can I do to mitigate this initial 'stretch'?
I’d be curious to see if you could convert svg to another format on the fly faster than the browser does. From my layman perspective that behavior sounds like initializing a bitmap to a max size and then parsing the svg into it.
I don't know about any bitmaps in my code, but I definitely should look into it, as it feels like it should be solvable, especially with SVGs. I opted for SVGs so I could give my icons the user-selected background color with CSS.
maybe something like: your canvas is set to an initial size and then a smaller SVG is drawn inside it. When that's saved for display the resulting .png isn't the same size as the canvas so the browser moves things around a little?
What would happen if you started your SVG output by drawing a canvas-dimensioned border?
[1] The problems that I had with some SVG's is that they seemed to stretch the page wide while loading (in a flash) and then finally settling on their intended size after a split second. I remember that I searched for solutions and fiddled with viewbox, widht and height, but to no avail (they were in the hundreds of pixels). What can I do to mitigate this initial 'stretch'?