SVG Vectorial Graphics: Illustrate and Animate with Code
Ways to load an SVG on the web
A course by Javier Usobiaga Ferrer , Web designer
About the video: Ways to load an SVG on the web
Overview
“So far we have been working with SVG in-line, that is, writing it directly in the HTML code. However, the SVG can be incorporated into a web in many ways: content image, background image, loading with JavaScript ... we will see pros and cons of all of them.”
In this video lesson Javier Usobiaga Ferrer addresses the topic: Ways to load an SVG on the web, which is part of the Domestika online course: SVG Vectorial Graphics: Illustrate and Animate with Code. Learn to create vector illustrations for your website, from basic lines to interactive animations.
Partial transcription of the video
“There are several methods to load SVG on a web page: as a content image. as a background image. or using Javascript. Let's examine the advantages and disadvantages of each. When we work with SVG as an external file. either as content image or background image. It's essential to include this xmlns attribute at the start of the SVG tag with the specified attribute value and address to ensure correct redirection. This step is crucial for the SVG to function properly. This object relies on XML language. which requires specific attributes known as namespaces to correctly display its content. The...”
This transcript is automatically generated, so it may contain mistakes.
Course summary for: SVG Vectorial Graphics: Illustrate and Animate with Code
-
Category
Web & App Design -
Software
Adobe Illustrator, Sketch -
Areas
Animation, Interactive Design, Web Design, Web Development

Javier Usobiaga Ferrer
A course by Javier Usobiaga Ferrer
Javier Usobiaga is a Web Designer for 10 years and co-founder with Marta Armada Swwweet studio, specialized in designing responsive webs from the initial conception to the front-end development.
He also enjoys a lot in his facet as professor of Web Design in renowned workshops and schools like Elisava, IDEP.
Usobiaga understands the web as a whole, not only how beautiful it can be on the computer screen, but its usability in different devices and circumstances.
In his words "I think that as important as the aesthetic is how fast it charges or how well it responds, and I think that in our industry we often forget about that."
- 98% positive reviews (273)
- 9,308 students
- 32 lessons (2h 2m)
- 28 additional resources (6 files)
- Online and at your own pace
- Available on the app
- Audio: Spanish, English, French, Italian, Portuguese, Turkish
- Spanish · English · Portuguese · German · French · Italian · Polish · Dutch · Turkish · Romanian · Indonesian
- Level: Beginner
- Unlimited access forever
Category
Areas
