Support for setting width and height attributes directly on the SVG element (not viewBox)

[heralden]

I checked the source and it doesn't seem possible to set the width and height of the SVG element; it's only possible to set the viewBox width and height. According to this stackoverflow answer (and the testing I've done myself), this is the only way to have an SVG element that has a constant height but stretches in width.

How about adding extra options for elementWidth and elementHeight that will set the width and height attribute directly on the SVG element?

I hope it's alright I didn't fill in the issue template. I felt this was easier to explain with words.

[AjayPoshak]

As of now, height and width passed to SVG is the height and width of viewbox. There is no way to directly set the width and height of the SVG element. And the use case presented on StackOverflow seems compelling. I think that there should be extra options to set dimensions directly on the element.

@rubyconn Issue template is just a guideline, not a rule. It helps us understand the issue better. Anyways, you have explained it well. 👍

@danilowoz What do you think about it ?

[danilowoz]

Hey @rubyconn, I got your point.

So far, I haven't the option to set the size directly on the component because the property styles can do that, plus I'm worried about making a mess between width/elementWidth and height/elementHeight. I'm not sure if the next developers will understand the differences between these properties, you know?

And there is another point, I can't be strict on the type of this values (e.g. 100% is not a number and 300px is a number or a string?)

Besides that I made a few tests using the both ways and I got the same results:

<Facebook elementWidth="100%" elementHeight="70px" preserveAspectRatio="none" />
<Facebook style={{ width: '100%', height: '70px' }} preserveAspectRatio="none" />

---

BUT this issue isn't the first one asking me about it. If you agree that this change will have more profit that loss we can implement these properties :)

What do you think? @rubyconn @AjayPoshak @lcsrinaldi

[lhrinaldi]

I think in part would solve my problem, it has another point, this is how it works for me:

svg {
  height: 152px;
  width: 100%;
}

<svg viewBox="0 0 100% 152" version="1.1" preserveAspectRatio="xMinYMin">
  <rect clip-path="url(#s9u0hpi8lui)" x="0" y="0" width="100%" height="152"></rect>
  <defs></defs>
</svg>

But then HTML warns about viewBox not accepting percentages and if I remove it altogether it works.

In the end what I need is an elementWidth property that would both fill the svg and rect width. And the possibility of not having a viewBox property.

[heralden]

@danilowoz
I wasn't aware that the same result could be achieved by using property styles. Thank you, that solves my problem!

I will be closing the issue since this feature is no longer relevant for my use case.

@lcsrinaldi
As far as I understand, the viewbox dimensions sets the scale for the children and the width to height ratio for the SVG. If you set preserveAspectRatio="none", it will always grow to the size of its parent container, so it shouldn't be necessary to use a percentage value if that's your goal.

If your goal is to have a constant height and variable width (like mine), then it should be enough to use the style you have defined and set preserveAspectRatio="none". It doesn't matter what the width and height of your rect and svg elements are, as long as they are consistent between the two elements.

[lhrinaldi]

@rubyconn if you set to none the svg graphics gets all stretched out.

What I wish is a way to not set the viewBox property. Is this property obligatory inside svg?

[danilowoz]

@lcsrinaldi the property is necessary for many reasons, take a look at this nice article:
https://www.justinmccandless.com/post/making-sense-of-svg-viewboxs-madness/

Thanks guys

[lhrinaldi]

@danilowoz sure, thanks for the article, library and your help. I think I'll end up forking the project to be able to do this. Having a responsive width SVG without getting stretched and weird graphics is hard.

See ya!

[danilowoz]

We're welcome! That's true, SVG is really weird!

Feel free to open a PR :)