html - How to show graphicaly in a web browser available shops in a mall or how to switch from Flash to HTML5 & SVG

Question

I need to show graphically in a web browser several malls with multiple shops and whether a shop is free or it has been leased and some information about the shop such as its surface. The shop will be paint in green if its free or in red if it is leased and the info will appear on a popup. I just need to draw a 2D layout of the mall.

I was using Flash to do this, but since Flash has reached EOL I have to switch to other technology. I was thinking about HTML5 and SVG but I am not sure how to do it. Can I pick your brains to know where to start?

All the best,

question from:https://stackoverflow.com/questions/65833145/how-to-show-graphicaly-in-a-web-browser-available-shops-in-a-mall-or-how-to-swit

Answer 1

SVG definitely sounds like the best/easiest way to do what you want.

You can build out your base mall map in any vector art tool, such as Adobe Illustrator or Inkscape. From there, you can use normal CSS to style the elements.

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS

<circle id="overlay" cx="0" cy="0" r="200" stroke="none" />

Then in your CSS:

#overlay {
  fill: #f3f;
}