SVG + CSS = ????

What is SVG and difference between svg and png or jpg?

Now ,First of all we talk about png of jpg. These types of images are pixel based. That's why for higher resolution image file should store large numbers of values of each pixels

Then What's new in svg ?? This is vector based images. that's why we can code it manually. And image will also not blur on big screen devices. We can create css to a svg and give animation to a svg easily.

Let's talk about technic

• Open your google drive in your computer and create a new google slide anywhere you want
• Choose blank layout and start drawing you can add shape and color it and draw the shapes as you want in svg
• after drawing is completed click file and download it in svg format
• open the svg in vscode and for simplicity porpuse select language mode as html and right click and format document
• now copy the svg formated code and paste it in your html document
• now you can use inspect element and track each box which you want to style
• you can remove the border path if not necessary
• give id to the path you want to add css
• Now you can animate it or you can add link as a tag as you want
• See the demo below
• If you click on this arrow you will redirect to home page
• That's all you are clicking on a specific page of an image and that specific part react as link
• You can create any drawing I just created this for demo
• Possibilities are endless. Must try this technic