From the course: Learning SVG

Unlock the full course today

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

Add an external image to an SVG

Add an external image to an SVG - SVG Tutorial

From the course: Learning SVG

Start my 1-month free trial

Add an external image to an SVG

“

- [Instructor] When you get to this point, you need to start thinking of SVGs as meta containers for graphics. We make a viewBox then draw graphics and text and images inside that viewBox. Yes, I said images. You see, web documents can display images and, since SVG is a web document, an SVG can display images as well, both other SVGs and bitmap images. To display an image inside an SVG, we use the image element. The image element has six main properties, x and y, which set the co-ordinates for the top left hand corner of the image, width and height, which set the width and height of the image inside the SVG relative to the SVG's viewBox, xlink:href which points at the url for the image file and preserveAspectRatio which allows us to control whether the image aspect ratio can be changed or not. In the exercise files for this movie, I've added an image to the SVG. That image sits in the project as a separate file and that file has a physical width of something like 700 and something…

Contents