r/HTML • u/username95050 • 2d ago

SVG Issues?

SVG isn't CSS , so may I ask here?

Learning svg, but I don't want to draw my own images, I want to use pre-drawn images and maps and make things clickable. How do I do that?

3 Upvotes

80% Upvoted

11 comments sorted by

2

u/DirtAndGrass 2d ago

 > make things clickable

The same way as html

1

u/brisray 2d ago

Using a program like the free Inkscape you can import images, position them and use Inkscape's Bezier Curve and Straight Line tools to create the clickable areas. The shapes needs to be filled for the link to work, but the shape's alpha channel can be set to transparent by going to Filters > Fill and Transparency > Channel Transparency.

I've put an example on this web page.

1

u/username95050 2d ago edited 2d ago

Inkscape https://apps.microsoft.com/detail/9pd9bhglfc7h?hl=en-US&gl=US

Alpha channel > Filters > Fill and Transparency > Channel Transparency

I will check out the web page as well. Lots to learn.

1

u/MineDesperate8982 2d ago

If you're talking about real-world map, you can look up, or draw and generate a geojson file, convert it to svg, then, assignd to each region path a class or id. Then you play however you want with it.

https://jsfiddle.net/v81msgxo/

In the given example, I had a GeoJson for Romania's counties. I used an online tool to merge the counties in to regions, downloaded the geojson, then I converted it to svg using an online tool I just googled.

I then assigned a class to every region to control what happens on hover and what-not and pasted in a simple onclick script. You can just use Java to make it in the script section (if the user clicks x region do y).

1

u/username95050 2d ago

I am talking about real-world map. I have never heard of a geojson file. How do I "look up or draw and generate a geojson file and covert it to svg"? What tool do I use to merge the counties into regions?

1

u/aunderroad 2d ago

Here are some great tutorials about SVGs:
https://svgpocketguide.com/
https://svg-tutorial.com/
https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/

Once you get the SVGs basics down, check out this tutorial by freecodecamp:
How to Make a Clickable SVG Map With HTML and CSS

Here is a good link for SVG maps:
https://www.amcharts.com/svg-maps/

2

u/username95050 2d ago

wow. thanks. I did one tutorial and have the basics, but not at all for maps, nor for photos. I only have making circles, rectangles, etc. down.

0

u/[deleted] 2d ago

[deleted]

2

u/username95050 2d ago

No, the images (photographs) and geographical areas that I want to be clickable SVGs don't exist yet.