CODEWITHSUNDEEP
htmlcsssvgdashboard
michaelT
michaelT

Reputation: 1711

HTML/CSS - Advantages and disadvantages creating a dashboard using SVGs

I am going to create a dashboard layout with HTML and CSS. A big screen will display the dashboard later. Some people said that I should not use divs and so on but the SVG tags such as 

<svg><rect><text>

My intention is to use a CSS grid (8x8) to organize the dashboard's elements (grid-items). These elements can have different sizes (1x1, 2x2, 2x1, 1x2) and can contain dynamic content (text, diagrams, tables). Diagrams are going to be generated by a library - I prefer Plotly JS - so the diagrams will have the svg format already.

A grid-item (card) could look like this:

Timestamp (optional)
Title
Description (multiline)

My question is; what are the advantages and disadvantages of using SVG tags instead of divs in my grid-items? By now it seems to me more difficult using SVG because there is no easy way to realize floating texts. Furthermore the text positioning (multiline) seems to be harder to realize.

Why should not it be legit to use 'standard' HMTL/CSS code to create the basic style of the grid-items?

Upvotes: 0

Views: 169

Answers (1)

JLe
JLe

Reputation: 2904

SVG is good for replacing pngs, like for icons and other graphics, as it also scales perfectly since it's vector based. It is also, as you said, great for plotting graphs and stuff, which is why most graph libraries use SVGs to draw the graphs.

As for building the actual page, that's exactly what HTML/CSS is made for - so I suggest you stick to that. You'll get easier responsiveness, easier placement and yes - text positioning is a bit complex in SVGs and super easy in HTML/CSS.

Conclusion: If you have a complex bit of design that has to scale in the dashboard, build that with SVG and stick to HTML/CSS for the rest. If not, use HTML/CSS for everything except the graphs.

Did the people telling you to use SVGs give you any arguments for why that would be better? If they didn't, it might be because there are no arguments for it..

Upvotes: 2

Related Questions