
Explore 2-D scalable vector graphics with SVG basics, learn to create scalable graphics for websites without quality loss, animate every element, and design rectangles, circuits, and text for engaging visuals.
Create SVG images for web pages using the SVG tag, define the viewport with width and height, and learn about default pixels and units such as cm, mm, in.
Learn how to display SVG on web pages, including inline SVG in the body and separate SVG files with namespaces. Resize with width and height while preserving vector quality.
Learn how to embed svg in html pages, either inline or as a separate file, and use iframes, image tags, or background images with precise width and height settings.
Learn how the SVG coordinate system differs from Cartesian, with x increasing to the right and y increasing downward within the visible image area, using pixels to set coordinates.
Draw rectangles in SVG using the rect element with width and height. Position them with x and y, use unitless pixels by default, and try centimeters as an alternative.
Style svg rectangles using inline style attributes and linked css to control stroke and fill. Use rx and ry to round corners and create circles or ellipses.
Explore stacking rectangles in SVG, where the last drawn sits on top, and adjust visibility with opacity while customizing fill and stroke to understand transparency and layering.
Learn to draw circles in SVG with the circle tag, using cx, cy, and r for center and radius in pixels, and style fills, strokes, and opacity.
Explore drawing lines in svg using the line element, specifying x1, y1, x2, y2 coordinates, applying stroke color, stroke width, and opacity, and composing multiple lines with basic styling.
Learn to create and position text in SVG using the text element, with start and end tags, x and y coordinates, and a live preview.
Learn to embed external bitmap images inside an SVG using the image tag, set x and y positions, define width and height, and add links.
Learn how to create links in SVG images by wrapping shapes with the a tag, using xlink:href, and setting target to open in a new tab.
Are you a programmer who hates graphic design? But do you still want to create awesome 2D vector graphics for your web projects?
SVG (Scalable Vector Graphics) is way to go!
Forget mastering complicated graphic design software that have nothing to do with programming. You can now create every kind of vector graphics with just a few lines of code. No design skills needed, at all!
What more? These SVG codes are perfectly editable and can be easily embedded in your websites.
If you know the very basics of HTML and CSS, you're all set.
Spend a few hours learning a bunch of SVG syntaxes, and you'll be creating awesome graphics and designs in no time at all!
Every programmer can become a pro designer now!
What will you learn in our course?
1. How to create shapes, lines, text with SVG syntaxes.
2. How to style every single SVG element you create.
3. How to embed links and images in your SVG images.
4. How to edit your SVG graphics in seconds by editing your SVG code
What are some real world applications of what you learn in this course?
By applying the concepts you learn in this course, you can code and design:
1. Graphics for your websites
2. 2D graphs and pictorial reports that can be used in presentations
3. Bar charts, pie charts, etc.
4. Scalable vector icons and logos that can be displayed in websites, mobile browsers, ipads etc.
Sky is the limit! You can apply what you learn here anywhere in the web space, in any sphere.
Your imagination is your only obstacle to how you apply what you learn here in your real world projects.
How is this course designed?
Our free course has 2 modules, where each module will thoroughly explain the intricacies of one of the concepts in SVG with a wealth of over-the-shoulder examples.
Here are the modules:
Module 1 - SVG basics - This is the foundations module. You'll learn how to create SVG files, how to embed the codes/images in your HTML websites, how the SVG coordinate system works and every other thing you need to get started with creating SVG.
Module 2 - Creating shapes (rectangles, lines, circles), text, images and links with SVG - You'll learn how to create rectangles, circles, lines, text, images and links with a wealth of examples in every single lesson. You'll be coding the shapes along with me in every single module so you understand the concepts better. You'll also learn how to style the elements in multiple ways to get the best possible result.
Why should you choose our course?
1. We like to be thorough in our teaching. You'll find everything you need to start creating awesome 2D vector graphics with SVG code/syntaxes in this course. You won't have to look anywhere else.
2. We strongly advocate learning by doing, rather than just listening or reading. Our lectures are filled with a wealth of examples that explain every concept clearly.
So, what are you waiting for? Enroll now and start creating awesome 2D vector graphics with SVG syntaxes in no time at all!