Creating Crisp Logos and Graphics on the Web with SVG Files

Creating Crisp Logos and Graphics on the Web with SVG Files


So in today’s video I’m going to walk you
through how to create and upload an SVG file, specifically in Showit. And so this is Showit if you haven’t used
before—it’s a website builder that connects with WordPress and it’s amazing because it’s
a drag and drop editor. But if you look in the actual editor portion
of Showit at the different logo files that I have here, this is an SVG file and this
is a PNG file and they don’t look all that different on the actual preview on the actual
app itself. But if you either publish your site or if
you hit preview, you’ll notice a big difference, especially if you have a retina device. So on a retina screen especially, you can
see that this SVG file is really crisp and if you look over the PNG file, you’ll see
that the edges of the type especially and then my icon—anywhere that there’s more
fine detailing within the logo itself—it’s going to look a little pixelated. And so we always recommend uploading an SVG
file to your website if you have one. And this goes for Squarespace, this goes for
a straight WordPress site. This goes for any website that you’re working
on as long as the platform allows for an SVG file and most should. That’s what we recommend using. So if you don’t have an SVG file or you’ve
never made one before, I’m going to show you how to make one using both Illustrator and
a free online app. So within illustrator you want to make sure
that you’re opening up the original vector file. So if your designer created something with
Adobe Illustrator or if you have a PDF or if you have—not all PDFs are vector, but
a lot of them should be—or especially if you have an EPS file, you should be able to
get the original vector logo. If you don’t have a vector version of your
logo and you can tell because you’ll be able to click on the individual elements. You can make things other colors if you want. If you open it up and it’s all just one image
and you don’t have the ability to ungroup things and work on things individually, then
you don’t have a vector file. But if you do have a vector file, it’s really
easy to save it as an SVG even if you don’t have an SVG file. So if we come up and we go to File and Save
As we’re gonna, save it to my desktop and you have the option down here to select from
a few different formats by default, it’s probably going to be set to Adobe Illustrator or EPS—whatever
file format you opened before,—but we want to save it as an SVG file. And so give it a name and then I’ll just click
Save As. And these settings, the standard settings
are all fine and so we’ll hit Okay. One other thing that I want to point out is
that if you—depending on how you made the logo—you also want to make sure that everything
is an outline. So if you can still click on the text and
edit it, that’s not good for exporting as an SVG file because not all computers are
going to render your fonts. So if for some reason you can still edit and
select the text you’d want to go to object and then Expand and keep hitting Expand until
the text is no longer editable. So once you have exported your file, you can
just come in and upload the SVG file and it should look a lot better. It should look really crisp. So the alternate way to create an SVG file
is to use a free online converter. And so this is https://imageonlineconvert.com. And I’ll put that in the notes of this video. And I know it looks super ugly, but I’ve tried
this and I promise it works. So If you upload your PDF of your logo, and
again this is only gonna work if you have the vector version of your logo, but if we
choose our file and then we can ignore all of these settings because we don’t actually
need to size our file, we don’t need to do anything. We’ll just hit convert file and it’s going
to run the process. And then right here is where you would download
the file and once it’s downloaded you can come back in and upload it to your website. And I tested it and this SVG file that was
created by this online converter, it looks just as good as my one made by Illustrator.

Comments

  1. Post
    Author
    mahi

    great tutorial….just wanted to let u kno if ur using wordpress there is a plugin "svg support" which will enable u to directly upload svg files directly to ur web page.

Leave a Reply

Your email address will not be published. Required fields are marked *