SVG basics for beginners - concepts explained with examples

Create awesome 2D vector graphics with SVG (code) + HTML - over-the-shoulder training with detailed examples per lesson

4.25 (250 reviews)
Udemy
platform
English
language
Web Design
category
SVG basics for beginners - concepts explained with examples
8,364
students
1.5 hours
content
Feb 2018
last update
FREE
regular price

What you will learn

Create multiple graphical elements with SVG code - shapes (rectangles, circles), lines, links, etc.

Create scalable vector graphics with just pure HTML and SVG codes

Create awesome graphics without mastering complicated graphic design software

Edit your SVG graphics in seconds by editing your SVG code

Why take this course?

🎉 **Course Title:** SVG Basics for Beginners - Concepts Explained with Examples 🚀 **Headline:** Create Awesome 2D Vector Graphics with SVG (Code) + HTML - Over-the-Shoulder Training with Detailed Examples per Lesson! 🎨👩‍💻 --- ### **Introduction to SVG Magic ✨** Are you a programmer who loves coding but dreads the idea of graphic design? Well, worry no more! With our **SVG Basics for Beginners** course, you can now create stunning 2D vector graphics with just a few lines of code. No fancy design software needed – just your trusty HTML and CSS skills! --- ### **Why SVG? 🤔** **SVG (Scalable Vector Graphics)** is the answer to all your design-while-coding problems. It's an XML-based markup language that allows you to create graphics that are scalable, interactive, and fully customizable with code. --- ### **Who Is This Course For? 👥** If you know the basics of HTML and CSS, this course is perfect for you! Whether you're a seasoned programmer or just starting out, SVG is a powerful tool that will enhance your web projects with minimal effort. --- ### **What Will You Learn? 📚** - **Creating Shapes and Lines:** Master the creation of shapes, lines, and text using SVG syntaxes. - **Styling SVG Elements:** Discover how to style every SVG element you create with ease. - **Embedding Links & Images:** Learn to seamlessly embed links and images into your SVG designs. - **Editing SVG Graphics:** Edit your SVG graphics in seconds by editing the SVG code – no design skills required! --- ### **Real World Applications 🌍** The knowledge you'll gain from this course can be applied to create a myriad of graphics and designs for your websites, including: 1. Custom graphics and icons 2. Scalable 2D graphs and pictorial reports 3. Interactive elements like bar charts and pie charts 4. Scalable vector logos for web, mobile browsers, and tablets --- ### **Course Design 🏗️** Our comprehensive course is designed to be engaging and hands-on. Here's what you can expect: #### **Module 1 - SVG Fundamentals** Get started with the basics of SVG, including how to create SVG files, embed them in HTML, understand the coordinate system, and more. #### **Module 2 - Advanced Shape Creation & Styling** Learn to create complex shapes like rectangles, circles, lines, and text. You'll also discover various styling options to make your SVG elements stand out. --- ### **Why Choose Our Course? 🏆** - **Thorough Teaching:** We cover everything you need to know about SVG without leaving any stones unturned. - **Hands-On Learning:** Our course is packed with examples that make learning by doing a reality. - **No Additional Resources Needed:** You'll have all the tools and knowledge you need right here. --- Don't let design complexities hold you back from creating beautiful, scalable graphics. Enroll in our SVG Basics for Beginners course today and start transforming your web projects with captivating vector graphics! 🌟

Our review

--- GroupLayout: **4.25/5** Recent Reviews Summary: **Pros:** - **Comprehensive Introduction**: The course provides clear explanations and practical examples that are effective for beginners and motivate them to further explore SVG graphics. As Chris, a learner, noted: "This free beginners course (I also bought the SVG course) will put you on your way... Everything is explained clearly and the lectures are easy to understand." - **Engaging Teaching Style**: The teacher's approach to teaching web development is inspiring and engaging, making the subject matter exciting and encouraging further learning. Chris remarked that "the teacher surely knows how to engage you into that world and will inspire you to know more." - **Real-World Application**: The course is practical, as it addresses the common issues faced when dealing with SVGs generated by professional drawing applications. Knowing the technology behind SVGs is crucial for troubleshooting and understanding the code structure. - **Clear and Structured Content**: The explanations in the course are clear, making it easier to grasp complex concepts. This is reflected in feedback such as "Everything is explained clearly" and "the lectures are easy to understand." **Cons:** - **Repetitive Content**: Some learners found the course to be too basic with repetitive information. One reviewer noted: "zbyt podstawowy, za dużo powtórzeń, za mało interesujących treści." (Too elementary, too many repetitions, not enough interesting content.) - **Lack of Advanced Topics**: The course may not cover advanced SVG topics or tool usage, which could be disappointing for learners who have a more intermediate understanding and are looking to deepen their knowledge. One learner stated: "Nothing explained regarding, how to create svg, which tool we can use to create." - **Assumption of No Technical Background**: Some reviews suggest that the course assumes prior knowledge of HTML, which could be a disadvantage for complete beginners. As one reviewer pointed out: "The quality is compromised by the fact that the tutor assumes every learner has no technical background of the most basic HTML concepts." - **One-Sided Focus**: There might be an overemphasis on the importance of manual SVG creation compared to using tools, which could lead some learners to feel the course is a "waste of time" if they are looking for tool-based tutorials. **Overall Verdict:** This course is highly recommended for beginners interested in understanding the basics of SVG and those who wish to manually create SVG images, especially when considering the quality of explanations and the engaging teaching style. However, learners with a background in HTML or those looking for comprehensive coverage of both manual and tool-based SVG creation might find this course too basic or incomplete.

Charts

Price

SVG basics for beginners - concepts explained with examples - Price chart

Rating

SVG basics for beginners - concepts explained with examples - Ratings chart

Enrollment distribution

SVG basics for beginners - concepts explained with examples - Distribution chart
1572756
udemy ID
2/27/2018
course created date
7/11/2019
course indexed date
Bot
course submited by