From the course: SVG Graphics for the Web with Illustrator

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Embedding SVG files in a webpage

Embedding SVG files in a webpage - Dreamweaver Tutorial

From the course: SVG Graphics for the Web with Illustrator

Start my 1-month free trial

Embedding SVG files in a webpage

- [Instructor] You are looking at an SVG image embedded in a webpage. This bar chart is an SVG image. There's three ways that that image can get there and I'm going to show you all three, now. The first is I can hand-code an SVG image in my code editor. In real life, for a complex image, it's unlikely that anyone would actually create the SVG image from scratch in a code editor. It's easier to generate that code in Illustrator but I just wanted to take you behind the curtain, show you that it can be done. Next, let's generate an SVG image just like it in Illustrator and I'll show you how to pop that into a browser. So, we'll jump over to Illustrator and here I've got a bar chart with the same size bars that I used in the hand-coded chart, and I'll export that as an SVG file by choosing file, export, export for screens. I'll select the SVG format. Make sure that I'm sending it to the proper folder. I've got a web-friendly artboard name, bar-chart. No spaces, no special characters, and…

Contents