Coding SVG Elements Versus Creating Intricate CSS Documents

Websites with interactive elements were originally achieved through having browsers load large files created in Adobe Flash and the like. In recent years, however, websites have adopted the principle of using the syntax directly fueling a given web page's design to manually instruct browsers to render graphics and create dynamically responsive UI elements. While HTML and CSS files usually work in unison to create a basic web page, each language offers a separate approach to creating aesthetics that do not require separate video and image files.
Scalable vector graphics are in common use nowadays because they avoid pixelization and blurriness regardless of how closely the viewer magnifies them on a given browser's window, and they can also be loaded quite rapidly by browsers in comparison to media files with potentially large footprints. HTML is intended to be the primary language used to express SVG because it offers a more flexible array of available drawing functions than CSS.
CSS, on the other hand, is intended more for handling user interface designs and can be used to animate how they visually react to the user's input. There is an example project on codepen.io named "Scooped Selector" that demonstrates how CSS can be used to display a navigation bar in which the highlighted item is surrounded by a circle that smoothly shifts to another item as soon as it is clicked. As this happens, a separate shape occupying the "background" of the bar appears to contort to accommodate the aforementioned circle in terms of space. CSS offers the flexibility to animate elements such as SVGs that have been separately drawn in HTML; JavaScript files are not always necessary.
Given the inclinations of each language, it is ultimately impractical for a website to have its CSS files supply all of its illustrative elements when SVG expressed within HTML can do so with a greater range of functionality. Talented web designers have created intricately illustrated images by using only the CSS language to express them, but this is mainly done for the sake of having them as showpieces illustrating what CSS is technically capable of. For more information click here https://i.stack.imgur.com/MOcte.png.