Manipulating SVG components in React

Question

I am brand new to programming and am currently working on building a surf app in React JS. On my landing page, I would like to render a few location pins along an image of a coastline. I'd like the pins to eventually be clickable and take you to a view with more detailed info on surf conditions (querying an API for that). I'd also love to have one of the pins animate depending on whether or not it corresponds with the the surf location I am recommending to the user.

Someone recommended that I use SVG for this. However, I'm overwhelmed by all the research I've done and am not sure how to approach something like this, or if SVG even makes the most sense. I've been playing with converting my SVG files to React components, and have them rendering on the page, but not sure how to control the positioning, add animation, etc.

Any suggestions would be much appreciated! Thank you.

Answer 1

React aside, understanding CSS positioning and how SVG graphics render will get you started in the right direction. You can take this knowledge to any framework (React, Vue, Angular, etc).

CSS Positioning

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning

How to scale SVG

https://css-tricks.com/scale-svg/

I created a small example of overlaying SVG images and applying a click event. Imagine this as a pin on a map.

 const green = document.getElementById('green'); green.addEventListener('click', () => alert('Surfs up!'), false);

 #orange { outline: 1px dotted red; width: 200px; } #green { position: absolute; top: 30px; left: 30px; z-index: 2; outline: 1px dotted red; width: 20px; height: 20px; }

 <svg id="orange" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"> <circle fill="orange" cx="50%" cy="50%" r="5"/> </svg> <svg id="green" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"> <circle fill="green" cx="50%" cy="50%" r="5"/> </svg>

Answer 2

You can use svg for this of course it's not that hard to use them as images22.

If you want to animate a svg it could be a little bit harder so I can recommend you to use just html.

For your app you can use this lib to set your pins in specific locations.

For animations you can use this awesome lib its pretty easy to use and you can make great animation.