SVG Master
Learn the basics of web vector graphics SVG and acquire the skills to apply them in the desired direction through fun and diverse examples.
This course is prepared for Basic Learners.
What you will learn!
How to use SVG graphics properly on web pages
Creating interactive SVGs using JavaScript
Creating an icon font like Font Awesome
Want to create unbreakable images?
Master SVG with 1 Minute Coding's lecture! 😎
SVG (Scalable Vector Graphics)
An XML-based file format for representing two-dimensional vector graphics.
It is good for expressing clean images without resolution degradation.
From basics to various effects
Learn all at once 🔎
SVG is a vector graphics format widely used in modern web page graphics representation.
This course covers everything from the basic concepts of SVG to animation, various effects, and scripted interactions .
I wanted to study SVG, but the materials were too vast and scattered.
Those who have given up can learn and organize everything in one go with this class.
Only for this lecture
Let me tell you the features 😝
- Manipulating SVGs requires basic CSS and JS concepts.
For those of you who are not familiar with this, I have included a video review of the concepts in the Bonus Lecture section. - If you need to understand the concepts of JavaScript from the beginning,
You can also study together with the JS basics videos on the YouTube channel . - Click on the button inserted in the first lecture of each section.
You can download the source code for all examples and study conveniently.
I recommend this to these people ✨
Resolution is not broken
For those who want to learn SVG one by one
Through various practical training
For those who want to master SVG
Interactive SVG
Anyone who wants to make it
Associated Roadmap 🚎
Create dynamic, interactive websites that will make you exclaim, “Oh!”
Creating an interactive website by 1 Minute Coding
This is a roadmap of lectures. This lecture is included .
Recommended for
these people!
Who is this course right for?
For those who want to use SVG for icons, illustrations, etc. on web pages
Anyone who wants to create dynamic and stunning interactive animated graphics
Designers who want to get creative with SVG
I have a general idea of what SVG is, but there is so much information that it's confusing and needs to be sorted out.
Illustrators who want to express their living works on web pages
Need to know before starting?
CSS and JavaScript Basics
19,041
Students
1,179
Reviews
1,173
Answers
5.0
Rating
11
Courses
서울에서 웹 개발자/디자이너로 일했고, 제주를 거쳐.. 현재는 말레이시아 페낭에서 열심히 개발도 하고, 교육 콘텐츠도 만들고, 1인 기업으로서 해볼 수 있는 여러가지 시도와 실험들을 해보고 있습니다.
인프런 강의를 만들 때는 언제나 "지루하지 않고 재밌으면서도 유익한 강의"를 만드는 것을 목표로 합니다.
비주얼 임팩트가 있는 인터랙티브 웹에 관심이 많고, 유튜브와 페이스북 "1분코딩"에서 웹 개발 관련 기술들을 공유하고 있어요.
개발자/디자이너/콘텐츠크리에이터
인스타그램 @studiomeal
Curriculum
All
37 lectures ∙ (4hr 21min)
Course Materials:
Get ready
08:35
What is SVG?
06:10
Set SVG size
06:18
Compressing SVG
04:38
Applying CSS 1
10:12
Applying CSS 2
02:49