remove explicit svg inline styles

the generated svg element has an inline width and height style, making responsive overrides ugly or difficult.

the inline styles are applied here: https://github.com/urbit/sigil-js/blob/master/lib/src/index.js#L164

and result in an SVG that does not scale to its container

explicit width/height:

unset width and height (default behavior is to expand to parent size):

to be clear: responsive height is preferred. only the viewbox is necessary, since that tells the browser how an svg should be scaled.

if a consumer wants a sigil to be an explicit and constant size they can easily do that with

<div style={{width: size, height: size}}>
  {sigil({size, renderer: reactRenderer, ...})}
</div>

wheras to override these styles I must have a global style rule like

svg {
  width: inherit !important;
  height: inherit !important;
}

which is ugly and will definitely come back to bite a programmer in the future.

solving this issue will also solve: #30

[shrugs]

the caller should still set size, so that the stroke width and viewbox is set correctly, if that’s what you mean. the idea is that the caller would set an ‘expected’ size the sigil would display at, but then be free to display it at more or less depending on the responsive parent.

[g-a-v-i-n]

resolved in #39 and published in 1.3.5