Front End Center — Why Inline SVG is Best SVG

hi everyone and welcome to episode 3 of front-end centre today I want to talk about SVG I don't think most front-end developers are as comfortable with SVG as they should be it's one of the most powerful technologies available on the web yet it can sometimes seem quite complicated to use today I want to talk about why I think working with inline SVG lets you solve a lot of UI problems with very little mental overhead this is the first of two videos I'm dedicating to inline SVG today we're looking at the kinds of problems we can solve by handwriting chunks of SVG we'll start by discussing what I'm calling the three distinct modes of SVG on the web that is the three different ways a browser can interpret and execute an SVG file because I think that's a huge source of confusion each mode has its own limitations and so you might be looking at some documentation or a blog post or some kind of cool demo and it won't be clear whether what you're seeing is actually relevant to the way you're working with SVG next i want to show just how easy it is to hand write some inline SVG to build a small piece of UI I feel like a lot of people and I've certainly been guilty of this myself will go out of their way to build something that's quite awkward with HTML and CSS that would be ways simpler to draw with SVG so I'll demonstrate just how simply you can drop in some SVG into an existing UI and talk about what you can do with it finally today I'll demonstrate a couple of more advanced transitions that SVG is capable of that would be difficult or impossible to achieve with CSS alone ok let's begin what do I mean when I say that SVG has different modes well in short there are a lot of different ways to get SVG onto a website and depending on which one you use the SVG behaves differently these break up into three groups which I'm calling object image and inline and to understand why they're so different we need to understand what the web was like when SVG was first proposed the first version of the SVG spec came out in 2001 and included pretty much everything that's there today at its core it's a vector image format of course but it also included the ability to define complex animations maybe most surprisingly though it also allowed you to respond to user input and manipulate elements programmatically using JavaScript which takes it well beyond the scope of a normal image format but this is understandable when you consider what the landscape looked like back then IE 6 was brand new and pretty much any rich interactivity or animation was done using the Flash plugin so it made sense for the SVG to take on all these extra features effectively creating a file format on par with flash a few years later when browsers started to natively support SVG that conceptual model persisted and so when you reference an SVG file using an embed object or iframe tag you're effectively loading a foreign object that the browser has no knowledge about like a flash file the file stands alone you embed it on a page it defines its own interactions and animations but crucially you have little or no control over it from outside in the modern web it creates a barrier between authoring the SVG and using the SVG which I think in a lot of cases ought not be there the next mode is simply using an SVG as an image either from an image tag or a background image in CSS this is conceptually really simple and I'd say it's probably the usage that most people are familiar with comparing it to object mode you can see that it's simpler because some of the more advanced parts of SVG have been disabled it can no longer run its own JavaScript which means it can't respond to user interactions and while it can still run animations it's now become a purely visual object it's much more like a PNG or animated gif than it is a flash file but notice that it's still not controllable from outside it's still a self-contained object and if we want to change anything about it we have to go back to the original file and make an edit so while using SVG as images is certainly simple it's not very flexible if we want flexibility we need to use SVG in the third mode in line by writing SVG markup directly in a HTML document we find that all this separation of SVG and the rest of your app disappears reducing the cognitive overhead of switching between them dramatically you can think of it simply like dropping into drawing mode within a document like an extension to the HTML language to me this makes a lot more sense than an SVG file that's self contained because these days they'll be interactions and animations applying to CSS and HTML elements as well inline SVG elements like any HTML element on the page becomes controllable from outside that is with the same JavaScript and CSS that you're already writing and so when you think about animating or handling user interactions or changing styles based on context you don't need to look up the SVG way of doing those things you use the same tools you're already comfortable with and to me that's the big win so now I want to look at some of the properties of working with inline SVG by showing it's like to solve a simple UI problem by writing some by hand consider a simple form we have two inputs a username and password and a sign-in button it's pretty bland but it's okay the problem is we have a very subtle focus indicator when we click on one of these fields you get a blinking cursor and the border at the bottom darkened slightly it's so subtle I'm not even sure it's going to show up in the video that's a problem for accessibility particularly for people navigating using a keyboard or with less-than-perfect eyesight and we've caused it by making the same mistakes a lot of websites do which is disabling the default focus outline on these elements which is okay as long as we provide a sufficient alternative I'm going to do that by introducing a small piece of SVG the first thing we have to do is define a view box now there's a lot to understand about the view box but we really don't need to know any of that now we can think of it simply as defining the dimensions of our drawing so a view box of 0 0 2020 defines a space that has an aspect ratio of 1 to 1 or a square but also sets the relative size of pixels within the SVG generally I pick a multiple of 10 that's close to the size that will end up being rendered at that's just for convenience the good news is when we've said it we'll know that the final SVG will scale to whatever size we need the next part is to tell the browser how big to render the SVG we can do this with CSS but for now let's just give it a width of 1 Ram we don't need to give it a height browsers will look at the aspect ratio defined in the view box and the width that we set and figure out the height that's needed here we can see it's rendered out 16 by 16 pixels now let's draw a simple path from 0 0 draw a line to 10 10 then continue to 0 20 we've made a triangle but I don't want a triangle I wanted a path so I have to set the fill to none and the stroke to a color this is probably a good point to discuss how these properties interact with CSS because this is one of the strengths of working with inline SVG I'm just going to add a class to the SVG element which also means I can move the width definition across to CSS now you might expect the declaring styles using attributes in SVG like fill 9 and Stroke black would be the equivalent of using inline styles in CSS and therefore it would be quite difficult to override them from outside but it turns out these presentational attributes actually have the lowest specificity available so trivial to override we can set virtually all presentational attributes like this in CSS note again that it's only because we're using inline SVG that we can write selectors that reach inside the SVG structure like this so let's simplify the SVG code by moving these attributes across to CSS as well now we just need to show or hide this arrow based on whether the input is focused we can use a trick here by placing the SVG after the icon we can use the focus pseudo selector and the adjacent sibling selector to show the icon and then because we're using flexbox for this UI we can use the order property to make the SVG appear on the left this is just one of the many reasons why I love flexbox there are other ways to reverse things in CSS but you really can't beat the simplicity of the order property let's just add a little transition and slide this in from the left so it doesn't just appear great now to get it on to the password field as well we just have to copy the markup if we're using any kind of template language or component framework obviously we could abstract this duplication but for now this is okay now we have an obvious visual cue about what field is currently in focus if you want to look at the code as it is now I've posted it online here we definitely could have built something this simple in CSS but by using SVG we've used techniques that apply to much more complex situations and so I think it's worth flexing your SVG muscles by writing some by hand from time to time to finish today I want to look at the sorts of effects that are either impossible with CSS alone or just extremely difficult and how easy they are with SVG I'm going to be focusing on the stroke - array and Stroke - off set properties because they're extremely reliable and present us with plenty of useful effects it would be even better to animate the transform properties since we can manipulate the arrangement of individual elements but doing that with CSS is not supported in all the browsers you're likely to support as we've already seen you can transform the SVG tag itself which gives you some effects but for a cross-browser way of transforming inner elements like paths will need to use JavaScript that'll be the topic of a future episode but for now we'll stick to CSS only techniques using - array and offset here's our example from before except we're now validating the presence and length of each of these fields the username now needs at least four characters to be valid and the password eight and you can see that the border below the input changes to green once it's valid and red if it's left in an invalid State that's just being done with CSS and the valid and invalid pseudo selectors the only complication here is that I'm not showing the red border until this data touched attribute has been set I've got a little bit of JavaScript running here that sets this data attribute whenever you submit the form and it's invalid or blur the input it just means that if i refresh the page these fields start out gray but if we try to submit they all go red I like to use the built in HTML form validation stuff wherever possible but it does need a little bit of UX tweaking from time to time anyway back to the SVG if I wanted to animate this arrow in a slightly different way I could delete the opacity and transform effects and add a dash or a property let's make it a bit bigger so we can see what's happening if we only set one value for the - array it sets dashes of a certain size and gaps of the same size as you can see though every time we change the dash array we can transition between them smoothly making line effects if we set a second value that determines how big the gaps will be and again they're smoothly interpolated the next property is stroke - offset which changes the start point for these calculations positive values shift the line backwards negative values shift the line forwards if we wanted to have this arrow start in the center and grow outwards on focus we can set the dash array to one followed by a reasonably large number to give us a point and then start changing the offset to try and find the midpoint it's somewhere between 13 and 14 it seems but we can actually get an exact figure using the JavaScript API if we select the element in inspector it's available in console as dollar zero and then we can call get total length and get the exact length of the line divide that by two and subtract 0.5 because our dash is one pixel long and we have the dash offset we need paste that in and we've got our dash right on the front of the arrow now when we focus the field we want to change both these values until the effect is smooth let's start by setting the offset to zero and we'll see that we have the dot sliding at the top of the arrow we just need to grow the dash at the same rate until it's the size of the entire arrow moving that down to one rim we see the effect now we can set that initial - sighs to zero to completely hide it and add 0.5 to the initial offset and we have a simple arrow draw itself in now I just want to implement one more effects because I think it can be a bit of a trap to see SVG only used for icons and things that look like icons I want to demonstrate an animated version of the border at the bottom of this input I'm going to create a new chunk of SVG below the icon called line which I'm going to make only two pixels high but 40 pixels wide with a simple path straight down the middle from left to right if we set a width and a stroke on that element you can see it drawing but it's far too thick we only want something one or two pixels high but if we set the height to 2 pixels we see that the line only draws in the very center here that's because by default and SVG with a view box will preserve the aspect ratio of the drawing as well as keep the view box visible we can override this by setting preserve aspect ratio to none and the 40 by 2 pixel line is stretched out over the full size of the SVG if we set a left margin on this line we can make it the same size as the inputs border now fact that I'm looking for is like the arrow I want the darker border to draw in from the middle outwards when we focus the field we can do this by making two lines one on top of the other SVG makes placing elements on top of each other really easy and since there's no Z index everything is just drawn from top to bottom I think it's a lot easier to reason about I've given the second line a class so we can target it separately let's move that gray color from the border to the stroke of the SVG then let's set the focus line to black and only show it when the input is focused I'm using Tilda instead of Plus here because it's not the adjacent sibling that's pretty much what we had before but now we can animate more than just the opacity since we know our line is 40 pixels long our calculations for the dash array and offset to draw this in from the middle are much simpler we can make a zero length - with 20 pixels spacing each side right in the middle of the line using an offset of negative 20 pixels then we make the dash 40 pixels wide and the offset zero when the input is focused the end result is quite nice an animated border drawing in to finish the demo let's restore the valid and invalid styles and make them draw in in the same way I'm also going to copy the mark-up for the password field now as well because it won't change again we can give these new lines the same default state as the focus line using - array and - offset to make them invisible they do however need different stroke colors but we can copy that from the earlier code that changed the border color now we can reuse these selectors here to trigger the transition a valid input will show the valid line and an invalid input will show the invalid one and now we see the line first draw black when we focus then draw a green when we're successful if we tab away on the password field the invalid line draws in drawing our tension back to that field but when we've typed enough characters that this field is now valid the green line draws in over the top and that's it we've used a series of lines all with their own colors and being shown under different conditions to achieve a pretty nice effect we've used SVG where we don't preserve the aspect ratio to replace something a border that we'd normally do with CSS I think there's a lot of opportunities to use SVG in this way to add a little bit of animation or character to your interfaces without requiring particularly much work or a completely different skill set as always with front-end Center the source code is available if you'd like to dig in and better understand anything we covered today thanks for watching if you're new to the channel front and center is a subscription screencast series where we release two episodes like this every month covering all sorts of topics related to front-end web development there are four more episodes currently available to subscribers including the sequel to this episode where we look at automating some of these steps so you can work with design software like sketch but still make use of the full power of inline SVG and CSS I'll also be releasing episodes here on YouTube every few months but if you want to stay up to date or just want to support the channel please head over to front-end center and subscribe

Channel: Front End Center

Views: 127,686

Rating: 4.9752927 out of 5

Keywords: svg, frontend, web development, screencast, tutorial

Id: af4ZQJ14yu8

Length: 16min 15sec (975 seconds)

Published: Mon Dec 12 2016

Reddit Comments

[u/itsjustausername]

I do not usually learn much about CSS on any given day, today was not one of those days.

[u/thefakegm]

Damn that was a good video.

[u/turing_C0mplete]

Is that Sublime text editor? If so, what theme is that? I like that the files being highlighted according to the filetypes.

[u/7PIzmA9ubj]

All the Front End Center videos are really great. I wish he'd put them out more frequently!

[u/ogurson]

I'm not some crazy purist when it comes to semantic HTML and stuff, but amount of markup added for some simple visual effect is atrocious.
This is definitely not the way I want to build my apps.

[u/bliitzkriegx]

Damn this guy is laracasts quality. Subbed on YouTube and looking forward to his next video. I'm considering subscribing to his site but I wish he had a bigger catalog of content

[u/hellip]

Interesting stuff. It is nice for small apps, but it feels a bit messy having multiple svgs in the dom for a single underline, for example.