Save Illustrator for SVG to use in HTML page

When working with the AWS contact form, I had created a graphic in Illustrator. You can see the post here.

With this test form I wanted to have everything in one HTML file this way it’s just one file to upload and update when needed without making sure the other files are there.

To get the image to be embedded, it needs to be a SVG format. Since SVG files are just code I can be embedded in an HTML file. Since I created the logo in Illustrator, I can save it out to a SVG file and embed the logo in the HTML file.

In Illustrator:

To insure the text looks as expected convert any fonts to outline, or you will need to use a common or a web based font.

Note: Illustrator file can’t have any raster images imported into it.

If you created your graphic with layers and gave them web safe names when you save to SVG click ‘More options’ then click the box that says ‘Unused Graphic Styles’ this will add the name of the layer to the graphic pieces, I called one of my layers ‘toyBox’ this is the rounded box at the bottom.

Quick instructions:

Open Illustrator file

Save a copy, depends on what you have to do next you might need to go back to the original.

Name your layers, or separate out areas into layers and give each a name like sky.

Convert text to outlines.

Save as or Export to SVG with these settings: SVG 1.1 or higher; Subsetting None; image location ‘Embed’; I have ‘Preserve Illustrator Editing Capabilities’ unchecked, thinking this could add more code to it, if I will be editing I’ll do it from the original Illustrator file.

You can click on the Code in the save window to pull the code or save and open in a text editor like notepad or a code program like VS code.

You’ll want the info from <svg… to </svg>; you don’t need the XML data above the svg tag,  you’ll add this on its own and not in an image tag ‘<img…’ I also added an ‘id=”logo”’ to this so I could easily add CSS to give it the right size and center it on the page, you can also call out svg in CSS but if you have more than one it will affect all. The CSS to get the size and centered:

#logo {
    width:300px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

If you used layers you can use that ID in your CSS to do things like at animation.

In the ‘Toys & Collectibles’ area I put this CSS in to change the text to pink per char when you hover over:

#ToyTxt .st6:hover {  fill: #f7abf7; }

Related Articles

Menu Graphic for Legend of Boggy Creek

Menu Graphic for Legend of Boggy Creek

For the new 4K disc release of the movie of ‘Legend of Boggy Creek’, I helped with getting the original artwork expanded to use for the menu screen. The original art takes most of the screen but leaves some space on the left and right. To expand the sides of the image...

read more
InDesign Multiple Records per page

InDesign Multiple Records per page

This continues the Data Merge in InDesign Post For this post we’ll look at something simple like a 2-up postcard on an 8.5 x 11 inch sheet of paper. With this we’ll bring in 2 records per sheet that will have the mailing address, the back of the card will be static...

read more
Variable Data in InDesign

Variable Data in InDesign

This is the basic instructions on how to do Variable Data Printing VDP setup in InDesign. If you’re looking to do a basic letter such as in Word I have the basic instructions here. Sometimes you’ll want something more designed than a letter or just prefer to work in...

read more

Pin It on Pinterest

Share This