SVG garden

When it comes to web design, particularly on the frontend, fast load times and interactivity are PARAMOUNT to the web experience. This is something that most folks will not pay attention to nor be aware of if it is done correctly, meaning that the best design will help support the content it presents and the user’s experience interacting with it. Many of us are very visual creatures- on a subconscious level we are impacted by the visual stimulus we receive on a daily basis, but this can be positive OR negative! We judge people, places and situations from how they look and what feelings that brings up, so when a user comes to our site and sees poor quality images or extremely long wait times that will reflect poorly on the product, company or individual we are coding for, which is a cardinal sin in the world of coding and business in general.

So how can I create something that is visually engaging, has the potential to be reactive and is not going to take years to load? Welcome to your tool belts: .SVGs

SVG (scalable vector graphics) allow us to create images with little or greater complexity that we can load into the site the traditional way (src=“URL”) which will work to display the image BUT the real power and fun comes in when you actually load the .SVG directly into your code. In my case I created this image

and exported it as a .svg file. Once you have that file you can go to our code editor and, in the case of VScode, you can just drag the file into the element you want it added to

and the result is:

Now- this is a super super simple image that I created pretty quickly, but with it I can now do some fun things directly in my React code:

import './App.css';
function App() {
var blur = document.querySelector('feGaussianBlur')
var deviation = 0
requestAnimationFrame(function loop() {
blur.setAttribute('stdDeviation', 10*(Math.sin(deviation+=0.1)+1))
requestAnimationFrame(loop)
})
return (
<div className="App">
<header className="App-header">
SVG BB!!!!
<svg width="741" height="626" viewBox="0 0 741 626" fill="none" xmlns="http://www.w3.org/2000/svg">
<radialGradient id="myGradient" >
<stop offset="50%"  stop-color="gold" />
<stop offset="95%" stop-color="red" />
</radialGradient>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
<path d="M150 66L170.431 119.897H236.546L183.058 153.207L203.488 207.103L150 173.793L96.5115 207.103L116.942 153.207L63.4539 119.897H129.569L150 66Z" fill="rgb(94, 28, 28)" className="selector"/>
<path d="M91 268L111.431 321.897H177.546L124.058 355.207L144.488 409.103L91 375.793L37.5115 409.103L57.9423 355.207L4.45386 321.897H70.5692L91 268Z" fill="rgb(146, 148, 4)" className="selector"/>
<path d="M595 66L615.431 119.897H681.546L628.058 153.207L648.488 207.103L595 173.793L541.512 207.103L561.942 153.207L508.454 119.897H574.569L595 66Z" fill="rgb(121, 56, 3)"
className="selector"/>
<path d="M650 274L670.431 327.897H736.546L683.058 361.207L703.488 415.103L650 381.793L596.512 415.103L616.942 361.207L563.454 327.897H629.569L650 274Z" fill="rgb(85, 4, 105)" className="selector"/>
<path d="M368 0L388.431 53.8967H454.546L401.058 87.2066L421.488 141.103L368 107.793L314.512 141.103L334.942 87.2066L281.454 53.8967H347.569L368 0Z" fill="rgb(11, 108, 121)"
className="selector"/>
<path d="M241 470L261.431 523.897H327.546L274.058 557.207L294.488 611.103L241 577.793L187.512 611.103L207.942 557.207L154.454 523.897H220.569L241 470Z" fill="rgb(80, 26, 47)" className="selector"/>
<path d="M525 470L545.431 523.897H611.546L558.058 557.207L578.488 611.103L525 577.793L471.512 611.103L491.942 557.207L438.454 523.897H504.569L525 470Z" fill="rgb(143, 179, 127)" className="selector"/>
<ellipse cx="365" cy="317" rx="183" ry="168" fill="url('#myGradient')" className="selector" />
</svg>
</header>
</div>
);
}
export default App;

Again this is a very very rudimentary .svg but as you can see in the code above we are literally telling the code to generate the image itself, meaning things like scalability comes with much greater ease and animations are possible!

The above code (REACT ONLY) now modifies our original image from the above state to :

and this comes at a FRACTION of the memory, thus time, taken up on the users end!

.SVG files are a great way to create the visual interface for users that feels reactive and engaging, without sacrificing image quality nor user’s wait time!