FREELessons: 14Length: 2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 SVG Design

SVG is awesome for use in icons and other web graphics, but when creating vector graphics for the web there are some task specific tools that can be very helpful. We’ll take a look at the best Linux vector software for SVG in this video.

Related Links

2.6 SVG Design

Hey, welcome back to Linux for Web Design. In this video, we're gonna talk about the options that you have for creating SVG in a Linux environment. SVG for the web is awesome. You can do really great stuff with it like creating animations. Creating icons that look beautiful at any size. Making logos that are always gonna be crisp at any resolution, and just for general illustration. There are a lot of applications that can create SVG, and the first one that I wanna show you is Boxy SVG. Now this is a program that's free. It's a web application, and what you're seeing right now is actually the programme itself live embedded in this website. So I can click through and show you some of the cool examples of illustration that's been done with this programme. If you like, you can actually use this demo as the software itself, because the whole toolset is here and you have an export panel. Or you can head to the Google app store, and you can install it as another webapp, and then you get a version of it that looks like this. Now Boxy SVG is a relatively simple vector editing program compared to something like Illustrator or Inkscape or Affinity Designer. But in the case of working with SVG, that can actually be a good thing because you don't need tools that are designed for complex print work. What you want is to create vector images that are gonna work beautifully on the web, and that's what this tool is really good at. So you've still got all the essential tools that you would look for in a vector editing program. So for example, you can still draw out shapes just as you would in any other vector editing program. But what makes this program really good is that it has a bunch of controls that are specific to working with SVG. So for example, over on the right here I can open up this box and I have direct control over the view box. Sometimes it can be a bit of pain when you're working with SVG in a vector application that's not focused on it. And then you have to tinker with the code after you've done your illustration to make sure that everything is coming out at the right size. But here, if you resize this canvas, then you're directly changing the size of the view box. So the code that you get out of this, is gonna give you exactly what you expect to see. You also get SVG specific controls over how aspect ratio is handled. The alignment settings allow you to control the objects inside your SVG, relative to the view box specifically. The language that we see in this Geometry tab here is also very SVG specific. And you have the ability to input metadata directly inside the interface. So you have these excellent SVG specific features to the software, but the actual design tools themselves are also very good. So you have access to a lot of simple things like being able to quickly and easily, grab a path and open it up. So you can keep adding in extra nodes or, then closing it off again. You have a good selection of shape tools for creating all kinds of different things. And the whole interface is just very clean and very straight forward to work with. So in my opinion, this is probably one of the best, if not the best tool for creating SVG icons and other illustrations, and not just that you can use on a Linux platform, but in general. And I say that because if ever you can find a tool that has features specific to the task at hand, then that can save you a lot of time and effort. The second option is Gravit. Gravit has arguably a more powerful set of vector creation tools. And it does have, SVG export, but it doesn't give you those SVG specific tools like Boxy SVG does. And then your third option, in my opinion, is Inkscape. And when you're trying to do interface design in Inkscape, it is a little bit like trying to put a square peg in a round hole. But for SVG, it actually has a really strong feature, and that is its inbuilt XML editor. So let me show you for example, if I create a square here. Now I have immediate access to the node that represents this square in the SVG's XML. And then I can directly edit the code that is gonna go into my SVG. So for example, let's say I want to change the width of this, I can select this property here. I can change this number and then I just hit Ctrl+Enter, and then it updates the SVG file. And you can do that with any property that exists inside your SVG. So again, it's probably not quite as SVG specific as Boxy SVG is, but this ability to directly edit the XML is something the can be very, very useful. All right, next up we're gonna talk about image editing software, and by that I mean photo editing software. So our needs in photo editing software are different as web designers to the needs of, say, professional photographers or people producing content for print magazines and what have you. So we're not necessarily going to be doing in-depth retouching of images and what have you. But at the very least, every web designer needs to be able to do things like resizing images to fit inside content. And then even though advanced photo manipulation software is not as strong a need for us as other professions, there are times where we still do need to do it. So in the next video, we're gonna look at some options on Linux for more basic image editing requirements, as well as some that are a little more advanced. So I'll see you in the next video.

Back to the top