Creating an SVG logo
See Adobe Illustrator: Tips and Tricks for similar articles.When creating a logo for a modern website it’s a good idea to use Adobe Illustrator or another program that can create and manipulate vector art to generate an SVG file rather than a photo editing app like Adobe Photoshop that is used to edit and manipulate pixels. The reason to use SVG for a logo and other assets is that SVGs can scale to many different sizes without losing quality and can be manipulated by JavaScript and CSS. In this post I will go over the steps to create a vector logo in Adobe Illustrator and convert it to SVG to be used on your website and lastly how to modify it via code to change size and color.
Step 1 – Open Adobe Illustrator and create new project
To create a SVG file we will need to use a program that can create and manipulate vector art. The most popular program for doing so is Adobe Illustrator. Adobe Illustrator is available as an individual program subscription from Adobe or as part of the Adobe Creative Cloud subscription. Open Illustrator and create a new project. For simplicity, set the art board to 1000px by 500px.
Step 2 – Create logo with text tool & Resize art board to fit logo
For this example we will be creating a text-only logo. Select the Type Tool and draw an area on the art board for your logo. Increase the font size until it reaches the desired width and height and fills in as much of the art board as possible.
Next we need to resize the art board so that it is just a little bigger than the logo. There are two ways to do this:
- Object > Artboards > Fit to Artboard Bounds
- Document Setup > Edit Artboards > Drag to size
I personally like to use a combination of the two. The Edit Artboard feature lets you drag the artboart to size it or set it with exact dimensions.
The next step is to create an outline of your logo. To do this, with your logo highlighted go to Type > Create Outlines.
After this is complete combine each shape by navigating to Window > Pathfinder and click the combine shapes button.
Next we need to save as an SVG. Click Save As and select SVG. You can keep all of the default setting and save.
Step 3 – Optimize generated SVG code
The code generated by Adobe illustrator needs to be optimized. If you open up the SVG in a text editor it looks something like this:
We can optimize and clean up the SVG generated with a 3rd party tool called SVGO-GUI, which you can download here. After downloading SVGO-GUI and installing it, open it. Simply find your saved SVG and drag it onto the drag and drop area. This tool will clean up all unnecessary elements in the SVG code that can be safely removed or converted without affecting the SVG rendering result. When opened with a code editor, your final SVG should look something like this:
Step 4 – Adding SVG Logo to your website
Create an empty HTML page and include a snippet of code at the top inside of our HTML body tag, or included it on an existing HTML page. What we are doing is creating an SVG element that will be the main container for our new logo.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>
<!-- SVG Library -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
</svg>
</body>
</html>
Inside of that tag lets add the code for our logo. Open the generated logo SVG with a text editor and copy all the code and paste the code in our <svg>
tag. Replace the copied <svg
with <symbol
and remove the xmlns="http://www.w3.org/2000/svg"
. Lastly lets give our symbol an id. For this lesson, we will call it “logo”. You should end up with something that looks like this:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>
<!-- SVG Library -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<!-- Logo -->
<symbol id="logo" viewBox="0 0 879 114"><path d="M5 42h27v65h41v-65h27v-33h-95zM151 70h25v-23h-25v-5h31v-33h-71v98h72v-31h-32zM188.5 57.8c0 29.2 23.9 50.7 56.8 50.7 11.7 0 23.7-2.7 29.7-6.1v-34.6c-6 3.8-15.7 6.5-24.8 6.5-13.9 0-21.2-6.5-21.2-15.6s7.6-15.8 21.4-15.8c9.1 0 17.6 2.9 24.6 6.3v-36.4c-6-3.3-17.9-5.7-29-5.7-33.5 0-57.5 21.6-57.5 50.7zM347 39h-20v-30h-40v98h40v-36h20v36h41v-98h-41zM430 42h28v65h40v-65h28v-33h-96zM537 9h40v98h-40zM646.4 33.8l-19.6-24.8h-37.8v98h36v-48h.7l18 23.1 17.3-22.8v47.7h41v-98h-36.7zM755 70h24v-23h-24v-5h30v-33h-71v98h73v-31h-32zM865.1 55.2c-9.7-7.6-23.3-9.2-27.3-10.5-1.6-.5-3.1-1.4-3.1-3.4 0-1.5.9-3 4.8-3 5 0 17.6 2.3 29.6 8.7v-32.2c-9-4.6-22.9-7.8-34.9-7.8-24.9 0-40 13.5-40 33.2 0 9.5 3.6 15.9 8.8 20.5 10.1 8.8 23.8 10.3 28.6 11.6 1.8.4 3 1.2 3 3.1 0 1.6-1 3.3-5.1 3.3-5.8 0-19.4-3.1-32.4-11.7v33.5c10 5 24.5 8 36.9 8 25.8 0 41.1-13.2 41.1-32.1-.1-8.8-3.3-15.7-10-21.2z"/></symbol>
</svg>
</body>
</html>
Now we are ready to use the logo to display it on our web page. To do this we will use another <svg>
tag:
<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg>
This puts our logo on the page; however, it is white on white so we cannot see it, so lets use CSS to modify it by applying some classes to the <svg>
tag:
<style>
.logo-dark {
fill: #000;
}
.logo-large {
width: 1000px;
}
</style>
<svg class="logo-dark logo-large"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg>
Now we are ready to use the logo on our webpage and by applying CSS classes to the SVG link container we can use the logo in different areas within your website and have it sized and colored to fit the page.
Related Articles
- Creating an SVG logo (this article)
- How to Use the Gradient Tool in Adobe Illustrator
- How to Use the Gradient Mesh Tool in Adobe Illustrator
- How to Use a Photoshop File in Adobe Illustrator
- How to Use Live Paint to Color and Paint Artwork in Adobe Illustrator
- How to Put Type in Perspective in Adobe Illustrator
- How to Create Variable-width Stroke Profiles in Adobe Illustrator
- How to Create a Line Graph in Adobe Illustrator
- How to Create a Pattern Brush in Adobe Illustrator
- How to Use Isolation Mode in Adobe Illustrator
- How to Add Spot Color in Adobe Illustrator
- How to Use Draw Inside Mode in Adobe Illustrator
- How to Find and Replace in Adobe Illustrator
- How to Divide Basic Shapes into Component Pieces in Adobe Illustrator
- How to Work with Bezier Curves in Adobe Illustrator
- How to Create a Brochure in Adobe Illustrator
- How to Use the Shape Builder Tool in Adobe Illustrator
- How to Use the Group Selection Tool in Adobe Illustrator
- How to Check Spelling in Adobe Illustrator
- How to Use Image Trace in Adobe Illustrator
- How to Use Global Color Swatches in Adobe Illustrator
- How to Manage Artwork with Sublayers in Adobe Illustrator
- How to Import Illustrator Files Into Adobe Animate
- How to Create Shapes from Multiple Paths in Adobe Illustrator
- How to Adjust the Default Artboard in Adobe Illustrator
- How to Create a New Document in Adobe Illustrator
- How to Use a Color Group to Change Multiple Swatches in Adobe Illustrator
- How to Create a Package File from a Template in Adobe Illustrator
- How to Work with Hidden Characters in Adobe Illustrator
- How to Work with Template Layers in Adobe Illustrator
- How to Create Symbols for Mapping Artwork to 3D Objects in Adobe Illustrator
- How to Work with Threaded Text in Adobe Illustrator
- How to Convert Type to Outlines in Adobe Illustrator
- How to Use Draw Behind Mode in Adobe Illustrator
- How to Use Adobe Illustrator to Create Website Graphics
- How to Create a Custom Pattern in Adobe Illustrator
- How to Use Warp Design Elements in Adobe Illustrator
- How to Create Custom Graphics from Letter Shapes in Adobe Illustrator