Good To Knows About SVG's
In my time as a Web Developer, I've been working with SVG's on more projects than not, with no real true understanding of how they work and how to fully utilize what they have to offer. Today, I'm going to share what knowledge I have gained so that whomever may have questions and curiosities like I did will need look no further.
Primarily, when I've needed to use SVG's it was for icons and logos that represent the client and their services rendered.
Why would Scalable Vector Graphics be the go to? There are four primary reasons that I can think of, including
- Scalability, meaning, regardless of size there is no pixelation or distortion.
- Accessible, in that SVGs can have alt text and descriptions added just like any other image can, right on the tag attribute.
- Animations, which add a level of movement and interest that static images cannot do.
- Interactivity, which would be done through JavaScript. I personally do not use much JavaScript in my workday, so I cannot speak to this one as much. With time I intend to shorten this gap in knowledge.
An example of what an SVG looks like could be something like this:
The code to render this as an SVG looks like:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- License: CC0. Made by SVG Repo: https://www.svgrepo.com/svg/11389/wine-glass -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="198.484px" height="198.484px" viewBox="0 0 198.484 198.484" style="enable-background:new 0 0 198.484 198.484;"
xml:space="preserve">
<g>
<g>
<path d="M146.208,88.344c10.12-8.688,16.1-20.224,17.295-33.363c2.775-30.533-11.607-52.552-12.222-53.475
C150.655,0.565,149.601,0,148.472,0H50.012c-1.129,0-2.184,0.565-2.81,1.506c-0.614,0.922-14.997,22.941-12.221,53.475
c1.194,13.139,7.174,24.675,17.294,33.363c8.785,7.542,20.268,12.65,33.319,14.852v66.337c-11.87,0.581-22.657,1.906-30.646,3.783
c-10.89,2.557-15.962,5.902-15.962,10.525c0,5.077,6.187,8.661,19.471,11.279c10.901,2.148,25.317,3.339,40.634,3.362v0.001
c0.051,0,0.301-0.001,0.301-0.001c15.317-0.023,29.733-1.214,40.635-3.362c13.284-2.618,19.47-6.202,19.47-11.279
c0-4.623-5.072-7.969-15.962-10.525c-7.987-1.876-18.774-3.201-30.644-3.782v-66.338
C125.942,100.992,137.423,95.885,146.208,88.344z M140.017,179.447c8.598,1.812,11.521,3.627,12.435,4.402
c-1.256,1.062-5.521,3.216-15.908,5.054c-10.237,1.812-23.475,2.813-37.301,2.829c-13.826-0.014-27.063-1.018-37.301-2.829
c-10.387-1.838-14.652-3.991-15.908-5.054c0.913-0.775,3.837-2.592,12.433-4.402c7.278-1.534,16.808-2.637,27.129-3.156v4.68
c0,1.864,1.511,3.375,3.375,3.375s3.375-1.511,3.375-3.375l0.008-80.73c0-1.864-1.511-3.375-3.375-3.375
c-0.048,0-0.095,0.005-0.142,0.007c-0.004-0.001-0.007-0.002-0.011-0.002c-21.184-2.982-44.687-15.713-47.122-42.501
C39.543,30.603,48.91,12.02,51.919,6.75h94.646c3.009,5.27,12.376,23.854,10.215,47.619
c-2.436,26.788-25.938,39.518-47.122,42.501c-0.003,0-0.007,0.001-0.011,0.002c-0.047-0.002-0.094-0.007-0.143-0.007
c-1.863,0-3.375,1.511-3.375,3.375l0.012,81.181c0,1.864,1.511,3.375,3.375,3.375c1.863,0,3.375-1.511,3.375-3.375v-5.13
C123.212,176.811,132.74,177.913,140.017,179.447z"/>
<path d="M142.413,72.616c6.496-9.941,6.572-19.851,6.572-20.268c0-1.852-1.479-3.456-3.33-3.473h-7.453
c-1.87-0.031-3.393,1.471-3.414,3.336c-0.021,1.864,1.471,3.392,3.335,3.414l3.791,0.064c-1.323,8.367-8.095,29.4-42.673,30.148
c-34.578-0.748-41.349-21.781-42.673-30.148l64.313-0.064c0.012,0,0.022,0,0.034,0c1.849,0,3.356-1.49,3.374-3.342
c0.018-1.864-1.479-3.39-3.342-3.408l-68.107,0.098c-1.851,0.017-3.343,1.523-3.343,3.375c0,0.417,0.075,10.326,6.572,20.268
c5.799,8.874,23.521,19.52,43.022,19.52C118.593,92.136,136.614,81.49,142.413,72.616z"/>
</g>
</g>
</svg>
Yikes.
So now I'm going to strip out the unnecessary code here, as I prefer to remove whatever is not required for rendering. For instance, style="enable-background:new 0 0 198.484 198.484;" is deprecated as of 2014 (Source). This SVG was downloaded from svgviewer.dev a couple weeks before time of writing.
After stripping out the parts that don't affect presentation, this is what I'm left with.
When you click the HTML tab up there in the codepen box, you may notice that I have also added
fill="currentColor"
to the svg and d tags. This is so that I can control the color of the svg using CSS, where all styling should live. This allows the flexibility of having colors update based on events such as hover, mouseIn, mouseOut, etc.
You'll see in this codepen that I've added in CSS to assign blue to the fill attribute.
If you're feeling more fancy, it's possible to add gradients to our svg. To set that up, we would need to add
<defs>
<linearGradient id="gradient-blue" x1="0" y1="0" x2="85" y2="85" gradientUnits="userSpaceOnUse">
<stop offset="0.4" stop-color="#090979"></stop>
<stop offset="1" stop-color="#00d4ff"></stop>
</linearGradient>
</defs>
Inside of the defs tag we have declared a graphics object. This object is a linearGradient, which an id is required to reference the object either in HTML or in the CSS file as is shown in the codepen above. The x and y coordinates on the linearGradient tag are saying "starting from the top left corner (0, 0), I want to extend the gradient 85 units to the right, and 85 units downwards". The next attribute gradientUnits="userSpaceOnUse", as I understand it, avoids distorting the shape when used on svg's that aren't square. I am also not certain of this so please do correct me!
Inside of the linearGradient we have two stops, for each color. Essentially, #090979 up to 40%, and then #00d4ff all the way to the finish line! translated to css: linear-gradient(to bottom right, #090979 40%, #00d4ff 100%);
One last thing, I wanted to animate the gradients on hover, which I can't lie I learned a lot of new things about svg gradients on the fly while writing this. I was not able to transition fill:url on hover, but what I was able to do was animate the stops inside of the linearGradient on hover which was a wild discovery for me. Look at this fine glass of wine.
As far as styling and interactivity is concerned, this is the full extent of my knowledge and experience in working with SVG's, thank you for following along with me, and I hope this has helped at least one other person!
Top comments (3)
Svgs are great. I started investigating them a bit when I wanted custom animations on my github page. I saw that most of those tags/stack declarations everyone has on their github/readme page were just svgs. I decided I needed my own. Very deep rabbit hole those svgs! XD 😆
Nice article! Just for fun, I simplified the SVG code some more. The result is about two times smaller:
I enjoyed reading this; keep up the good writing!
SVGs are awesome! Really enjoyed reading this article!