Embedded Files
Home > Chapter Review and Exercises > Chapter 25 SVG Images > Chapter 25 Exercise
Create your first SVG images
Create your first SVG images
This can be a great way for you to get a feel for the basics of SVG syntax and how to create shapes and paths.
For this exercise, complete Steps 1 to 3.
Create a simple SVG image
Create a simple SVG image
Step 2: Create a simple SVG image.
Step 2: Create a simple SVG image.
Some ideas are basic shapes like circles, squares, and triangles, as well as more complex images like flowers, animals, and objects.
Explore different SVG attributes
Explore different SVG attributes
SVG images can have a variety of attributes that can be used to control their appearance and behavior.
Some of the most common SVG attributes include fill, stroke, stroke-width, and opacity.
You can experiment with different values for these attributes to see how they affect the appearance of your SVG images.
Some of the most common SVG attributes include fill, stroke, stroke-width, and opacity.
You can experiment with different values for these attributes
Step:3 (Final Step) Save your SVG image in your SVG folder in your Dropbox.
Step:3 (Final Step) Save your SVG image in your SVG folder in your Dropbox.
AND...YOU ARE DONE!
AND...YOU ARE DONE!
The following is some additional information on SVG images.
FYI: Use SVG images in web pages
FYI: Use SVG images in web pages
Once you have created some basic SVG images, you can start to use them in web pages.
To do this, you will need to learn how to embed SVG images in HTML.
Once an SVG image is embedded in a web page, it can be resized, rotated, and positioned just like any other element on the page.
Save the SVG image file you created.
Open it in a browser (double click on it).
Open Sublime, and add the HTML markup below to a website.
Here are two ways to use SVG images in HTML:
<img src="my-image.svg" alt="My Image">
<svg width="100" height="100“>
<circle cx="50"/></svg>
SVG Tutorial: https://www.w3schools.com/graphics/svg_intro.asp
Optional: Create interactive SVG images
Optional: Create interactive SVG images
SVG images can be made interactive by adding event handlers to them.
Event handlers are functions that are called when a certain event occurs, such as when the user clicks on an image.
You can use event handlers to create SVG images that respond to user input.
For example, they could create an SVG image of a button that changes color when the user clicks on it.
Did you Know: You can use SVG images for data visualization.
Did you Know: You can use SVG images for data visualization.
SVG images can be used to create beautiful and informative data visualizations (think presentations, like PowerPoint).
You can use SVG to create charts, graphs, and other types of data visualizations that can be used to communicate information to others.
SVG is a XML file type. What are XML Documents?
SVG is a XML file type. What are XML Documents?
XML stands for eXtensible Markup Language
XML is a software- and hardware-independent tool for storing and transporting data.
XML was designed to store and transport data.
XML Does Not DO Anything.
XML Tutorial: https://www.w3schools.com/xml/xml_whatis.asp
A sample XML document
A sample XML document
<note>
<to>Bill</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
XML Does Not Use Predefined Tags
XML Does Not Use Predefined Tags
Document Object Model (DOM) is a standard way for accessing and manipulating bot SVG images and XML documents.
It presents both SVG images and XML documents as a tree-structure.
Read more:
Report abuse