gilbarbara/react-inlinesvg

Provide a default size.

McBenny opened this issue · 2 comments

As an SVG image has no particular size, its default size is its parent container's size. If the size is determined by CSS, in a large file, or calculated by JS for example, depending on the speed of the connection or execution, the SVG might rendre in the maximum size possible (ie the window). To avoid this, adding a width and/or height as an attribute in the svg tag could be a good idea.
Any style applied by CS of JS will override this default attribute as soon as it is loaded but at least, in the mean time, no gigantic SVG is rendered.
This idea comes from here: http://www.otsukare.info/2017/11/02/fatwigoo

Hey

I think this goes beyond the scope of this library. It shouldn't make assumptions about what it's loading and how it should be rendered.

It will be the same as a XHR library returning an array by default...

I do agree, this is opinionated, but the subject is still valid: in terms of accessibility, setting initial dimensions is a valid concern.
The way the module works doesn't give the opportunity to do it (or I'm missing something).
I think just passing an object of key/value pairs that would be translated into attributes and their value would be a solid solution, too loose, but accepting certain attributes that would be appended to the final SVG seems reasonable.

<SVG
    src="/path/to/myfile.svg"
    width="123"
    height="456"
    preload={<Loader />}
    onLoad: src => {
        myOnLoadHandler(src);
    }
/>