From 85fbe49501984c391461611f88f86b21183668a1 Mon Sep 17 00:00:00 2001 From: Hiruna SP Date: Thu, 14 Aug 2025 17:45:07 +0530 Subject: [PATCH] fix(curriculum): add SVG code example to lecture (#61703) Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> --- .../6716825aff3434a71fdc3e99.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-images-and-svgs/6716825aff3434a71fdc3e99.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-images-and-svgs/6716825aff3434a71fdc3e99.md index 7b49523dbcd..e7d151a5d55 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-images-and-svgs/6716825aff3434a71fdc3e99.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-images-and-svgs/6716825aff3434a71fdc3e99.md @@ -15,6 +15,22 @@ An SVG is a different kind of image. SVG stands for a scalable vector graphic. A SVGs specifically have the added benefit of storing data in XML. This means you can use them directly in your code as raw HTML with the `svg` element. It also means you can programmatically change the color of the image. +```html + + + + + + +``` + +This SVG code draws a smiley face by combining a few basic elements: + +- The `svg` element is the container for the whole drawing. It sets up the space where all the shapes appear. Everything you want to draw with SVG, such as circles, lines, or paths, goes inside the `svg` element. +- The `circle` element is used to make the face and the eyes. One large circle forms the yellow face, and two smaller circles make the eyes. +- The `path` element is used to draw the smile. It creates a curved line for the mouth. +- Each SVG element has attributes that control its appearance and position within the drawing area. + So when would you want to use an SVG? A great use case is for icons. If you want to create custom bullet points, or add icons to your links to represent social media platforms, using SVGs is the best approach. One of the most popular icon libraries, Font Awesome, uses SVG images for their icons. SVGs are also great for webpage logos, because they scale perfectly. They allow you to adapt your layout to any responsive design you need. Next time you have an SVG locally, try opening it with a text editor and playing with the code. # --questions--