Hey logo designers today. I want to talk to you about exporting SVGs from logo package express, and some tips and tricks for dealing with the problems that can arise when using this file format.
So in order to export SVGs from logo package express, you simply need to go to the settings window and the formats tab. And from there you can pick whatever web file formats you would like including SVG. So when Logo Package Express exports SVG, we are using certain standards that can not be changed by the user. And I'm going to show you what I mean by that.
So if we go to file and export export as, and then we select SVG, this is the same process, essentially, that Logo Package Express is using to export SVGs. And the next thing that we want to look at is these settings, the most important setting to look at is the decimal place.
So an SVG is a vector file and the way that the web browser reads and interprets this file is basically just mathematical equations and the math doesn't always work out to nice, whole numbers. And therefore you're dealing with a lot of numbers that include decimals. We have chosen the decimal point setting of three, meaning the accuracy of the math equations is going to limit itself to three decimal places, as opposed to five or 10 decimal places.
The more decimal places you include, the more accurate the math will be, and the more accurate the render will be, but there are diminishing returns for accuracy versus what can even be displayed by the pixels. And there are also diminishing returns in terms of the file size. So a really great setting is three decimal points because it allows for accuracy, but it also keeps file sizes small. So this is the setting that we typically use.
Now, what does the resulting SVG look like? Well, for this particular logo — this exact specific logo at the exact specific size that it is — you can see that we have ended up with kind of a disaster here. It moved some anchor points, and in particular, some of the round shapes are not preserved perfectly.
So let me show you what I mean, this is the SVG artwork, and over top of it I'm going to layer the original artwork andI'm going to go into outline mode. When I go into outline mode, everything looks okay except for those anchor points. As we zoom in, we're going to see that because the math is limited to three decimal places, some of the curves are being handled a little bit differently. The output is different. The rendering is different than the original artwork.
Now this can't be avoided. So you might as well accept, right off the bat, that SVGs are not ever going to be 100%accurate to your original artwork, but it's okay because they don't really need to be. At the sizes that they're being viewed at they're going to look exactly the same, you know.
This logo, for example, if we ignore the big triangle and we just look at eco power. I'm going to turn off the top layer. This logo is only this big, so we're never going to see the difference between those, you know, millimeters or micrometers or whatever they are of difference between the shapes. But sometimes it's going to change things so much that you could tell the difference at the size you wish to use your logo at.
So if we have these problems with SVGs, what can we do to make them better? Well, if you are exporting manually, all you need to do is go ahead and play around with those decimal points settings, to change that to a four or five or lessen it to one or two. This is the way that somebody who is manually exporting can find the best settings for their particular, specific logo.
But with Logo Package Express, you do not have access to our settings for what is best by default for standard SVG export. So if you are looking at your files and you discover that there's something you really can't live with — a shape has totally changed, or like in this case, there's this misplacing of the anchor points — then what you want to do is pretty simple. Even if it's a little bit of a hack, all you need to do is to change the size of your logo just a little bit, because this is going to change the math, right? So simply by scaling this up just a little bit, and then going to File > Export > Export As using all of the same settings. And of course, what this is replicating is your export through logo package express. Then we'll see that we get an entirely different outcome. So now everything is totally messed up, right?
The only way to really fix this is with a little bit of experimentation. So what I recommend is either scaling up or scaling down your logo by a significant amount. So in this case, I will just scale up this logo. And when I go to file export export, as we're going to get a result that is much better. So you can see now that this doesn't have any of the misplaced anchor points and the rounding and that sort of stuff has been accommodated for as well.
In summary, the best way to fix these problems that happen with SVGs is simply to change the scale of your logo. So that the math that is using the three decimal point setting will work out just slightly differently. And it should fix any of the problems with anchor points being moved or with round shapes appearing a little bit different than your original artwork.
Ultimately, there's always going to be some difference between an SVG and your original artwork, unless your original artwork is a perfect square. So hopefully this will help you be able to quickly make changes that allow you to use logo, package, express, and get SVGs that are exactly what you are hoping for. Thanks.
