title: Manipulating SVG components in React
body: <p>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.</p>
  
  <p>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. </p>
  
  <p>Any suggestions would be much appreciated! Thank you.</p>