5 ms·

I see a lot of convoluted CSS things like this. Is there not much awareness of SVG in the webdev community, or is there some other reason people don't want to u

I see a lot of convoluted CSS things like this. Is there not much awareness of SVG in the webdev community, or is there some other reason people don't want to use it?

nimchimpsky 6y ago
how would svg help ? Its not an image of a grid they want.
chrisshroba 6y ago
If you wanted arbitrary HTML content in the hexagons, would you be able to use SVG? I know you could hack together similar output since SVG supports images, links, text formatting, etc., but I can see people liking the idea of the hexagonal containers being plain divs that you can put whatever content you want into.
- edoceo 6y ago
  Putting nice markup (or even OK formatted text) into SVG has been a pain for me. I put an SVG background, then layer the HTML over it. It works but, I'm not happy about it.
  - uhoh-itsmaciek 6y ago
    Check out the sibling answer above, you can embed HTML in svg and it generally works well: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
    - edoceo 6y ago
      I'm familiar with those docs. That method was a poor experience for my mobile users. SVG support on mobile is not that great. Sadly FF had the most issues so I'm stuck with my workaround for now.
- nybble41 6y ago
  You can put arbitrary HTML elements inside an SVG element embedded in an HTML page: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
  - chryton 6y ago
    I wonder what the accessibility for html in svg is like. But really, isn't this just an iframe with a different name?
    - chrismorgan 6y ago
      No. An iframe is a separate browsing context which as a developer you can’t interact with perfectly, and is segregated from the rest as a user, which has implications on keyboard interactivity especially. Essentially, <iframe> is an accessibility headache. <foreignObject> is just the opposite of <svg>, so it’s no trouble at all.
- Fellshard 6y ago
  This example doesn't even show how it would place content inside the grid... and I suspect any attempt to do so with anything more than trivial text excerpts would result in the layout shattering, or the content clipping. And attempting to fit hexagonally-shaped content into the exact elements of the grid seems even less likely, here.
- xipho 6y ago
  Shameless plug. https://github.com/SpeciesFileGroup/waxy https://github.com/SpeciesFileGroup/waxy is coded based on Red Blob Games' incredible tutorials. We use it for visualizations in Rails.
seph-reed 6y ago
SVG is not typically very responsive (mobile, desktop), and you end up digging yourself into a "no support" hole. It seems the web community is dedicated to forcing things to work until they become fully supported features of HTML. Also, in this case, CSS grid is a very good choice for layout, but the background could totally just be an svg.
- felixfbecker 6y ago
  To explain why that is: In SVG everything has x and y coordinates relative to the SVG view box. There is no fundamental declarative layout like in HTML/CSS where the browser will calculate where elements go for you. SVG is great as something to embed in HTML, but not the other way around.
coldtea 6y ago
It's a different context than plain HTML content, so there's that...

I see a lot of convoluted CSS things like this. Is there not much awareness of SVG in the webdev community, or is there some other reason people don't want to use it?

nimchimpsky 6y ago

how would svg help ? Its not an image of a grid they want.

chrisshroba 6y ago

If you wanted arbitrary HTML content in the hexagons, would you be able to use SVG? I know you could hack together similar output since SVG supports images, links, text formatting, etc., but I can see people liking the idea of the hexagonal containers being plain divs that you can put whatever content you want into.

edoceo 6y ago
Putting nice markup (or even OK formatted text) into SVG has been a pain for me. I put an SVG background, then layer the HTML over it. It works but, I'm not happy about it.
- uhoh-itsmaciek 6y ago
  Check out the sibling answer above, you can embed HTML in svg and it generally works well: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
  - edoceo 6y ago
    I'm familiar with those docs. That method was a poor experience for my mobile users. SVG support on mobile is not that great. Sadly FF had the most issues so I'm stuck with my workaround for now.
nybble41 6y ago
You can put arbitrary HTML elements inside an SVG element embedded in an HTML page: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
- chryton 6y ago
  I wonder what the accessibility for html in svg is like. But really, isn't this just an iframe with a different name?
  - chrismorgan 6y ago
    No. An iframe is a separate browsing context which as a developer you can’t interact with perfectly, and is segregated from the rest as a user, which has implications on keyboard interactivity especially. Essentially, <iframe> is an accessibility headache. <foreignObject> is just the opposite of <svg>, so it’s no trouble at all.
Fellshard 6y ago
This example doesn't even show how it would place content inside the grid... and I suspect any attempt to do so with anything more than trivial text excerpts would result in the layout shattering, or the content clipping. And attempting to fit hexagonally-shaped content into the exact elements of the grid seems even less likely, here.
xipho 6y ago
Shameless plug. https://github.com/SpeciesFileGroup/waxy https://github.com/SpeciesFileGroup/waxy is coded based on Red Blob Games' incredible tutorials. We use it for visualizations in Rails.

seph-reed 6y ago

SVG is not typically very responsive (mobile, desktop), and you end up digging yourself into a "no support" hole. It seems the web community is dedicated to forcing things to work until they become fully supported features of HTML. Also, in this case, CSS grid is a very good choice for layout, but the background could totally just be an svg.

felixfbecker 6y ago
To explain why that is: In SVG everything has x and y coordinates relative to the SVG view box. There is no fundamental declarative layout like in HTML/CSS where the browser will calculate where elements go for you. SVG is great as something to embed in HTML, but not the other way around.

coldtea 6y ago

It's a different context than plain HTML content, so there's that...