- published: 24 Mar 2021
- views: 906975
-
remove the playlistScalable Vector Graphics
- remove the playlistScalable Vector Graphics
Scalable Vector Graphics
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.
SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, but are more often created with drawing software.
All major modern web browsers—including Mozilla Firefox, Internet Explorer, Google Chrome, Opera, and Safari—have at least some degree of SVG rendering support.
Overview
SVG has been in development since 1999 by a group of companies within the W3C after the competing standards Precision Graphics Markup Language (PGML, developed from Adobe's PostScript) and Vector Markup Language (VML, developed from Microsoft's RTF) were submitted to W3C in 1998. SVG drew on experience from the designs of both those formats.
This page contains text from Wikipedia, the Free Encyclopedia - https://wn.com/Scalable_Vector_Graphics
Podcasts:
-
SVG Explained in 100 Seconds
What are Scalable Vector Graphics 🤏? How are vector images different than raster images? Learn the fundamentals of SVG in 100 seconds! Learn more about web design, SVG, and CSS in this tutorial: https://fireship.io/lessons/css-cards-animated/ References: Star Wars Animation https://codepen.io/nerdmanship/pen/ZLoyPG Path Docs https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths #webdev #html #100SecondsOfCode Install the quiz app 🤓 iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8 Android https://play.google.com/store/apps/details?id=io.fireship.quizapp Upgrade to Fireship PRO at https://fireship.io/pro Use code lORhwXd2 for 25% off your first payment. My VS Code Theme - Atom One Dark - vscode-icons - Fira Code Font
published: 24 Mar 2021 -
Introduction to SVGs: A Beginner's Guide to Scalable Vector Graphics
In this introduction to SVG, we cover basic shapes like circles and rectangles, styling, the path element, quadratic and cubic Bézier curves, arcs, and some fun examples of how to animate SVG with CSS and make them interactive with JavaScript. Learn more about SVGs at https://svg-tutorial.com 0:00 Introduction 0:21 SVG examples 1:28 SVG in HTML 2:21 The SVG element 4:13 Circle element and styling in SVG 6:13 Rectangle element and basic diagram in SVG 6:58 The Path element in SVG 8:56 Transformations in SVG 12:13 Quadratic Bezier Curve in SVG 14:20 Cubic Bezier Curve in SVG 16:07 Arcs in SVG 17:38 Next steps Website — http://hunormarton.github.io/ CodePen — https://codepen.io/HunorMarton Twitter — https://twitter.com/HunorBorbely Some examples in the intro are from https://observablehq...
published: 04 Jun 2024 -
What are Scalable Vector Graphics (SVG) & how are they special? | Web Demystified, Episode 4
In this episode, we discuss image formats, especially SVG (Scalable Vector Graphics), the only vector image format for the web. It has unique abilities that let us create awesome graphic effects and it's actually easier to create than you think. If you're interested in learning more about SVGs, you can learn the basics of SVGs here in MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial It's free and designed for people just getting started. Want to sign up for the Mozilla Developer Newsletter? Get web development tips and tricks for devs of all levels: https://www.mozilla.org/en-US/newsletter/developer/ Web Demystified is a video series from Jeremie Patonnier designed to introduce the web in a way that's easy and understandable. In Episode #0, we offered an overview of wha...
published: 29 May 2018 -
How Do Vector Graphics Work?
Vector graphics allow you to rescale images to any size without losing quality! How does that work? Thanks to Pearl Auto for supporting Tech Quickie. Go to http://pearlauto.com/techquickie to get FREE two-day shipping! Follow: http://twitter.com/linustech Join the community: http://linustechtips.com
published: 18 Oct 2016 -
Use Scalable Vector Graphics in Your Presentation || ICONIC ACADEMY
#msoffice #video Even though that millions of PowerPoint slides are created each year, the majority of them lack audience engagement. Many of those are challenging to read as well as comprehend. Like many other things in life, a few simple adjustments may take our presentations to entirely new levels. When some of these modifications are highlighted, they almost seem like common sense, but most people think they are brilliant ideas.
published: 05 Sep 2022 -
Creating your first SVG!
Creating your first SVG! Like and Subscribe for more Cricut, Canva, and sublimation tutorials!
published: 21 Jul 2022 -
Difference Between Raster and Vector!
published: 29 Oct 2022 -
SVGs (Scalable Vector Graphics) - HTML Tutorial (Part 15)
SVGs are easily used with HTML! SVGs deserves it own course, so in this tutorial I only cover the basics, but there are a lot you can still learn about them! Subscribe for more videos! YouTube: https://www.youtube.com/stevesteacher?sub_confirmation=1 Odysee: https://odysee.com/$/invite/@stevesteacher:0 For more programming videos, feel free to subscribe to my 2nd channel: https://www.youtube.com/channel/UCZkCdex94Hp-3Aa-42kPhHg Python Programming Tutorials: https://www.youtube.com/playlist?list=PLYBJzqz8zpWasL5mTe0t9W2cXrv7rnnsG C++ Programming Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWZkX3y8sl8Fbi4mRze4SiPw Lua Programming Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWavt37pA6NANJTGStIHpybU Become a Web Developer: https://youtube.com/playlist?list=PLYBJzqz8zpW...
published: 06 Feb 2022 -
The best FREE SVG Box Design Generator?
#lasercutting #woodbox #svg #laserengraving #lasercuttingmachine #box #xtool #lightburn #glowforge #cncmachine #craft This video is an introduction to Basic Box Designer, a FREE SVG box design generator used to produce an SVG output file to be used on a laser or CNC cutting machine I guarantee this amazing FREE SVG box design generator will become an important tool for creating those custom size boxes you need. This will save you time and frustration. So, give it a try. Head on over to 'cutgen.io' and sign-up for a FREE account to get started. You will not be disappointed. website: cutgen.io
published: 04 Jan 2025 -
A beginners guide to SVG | Part One: The Why, What, and How
There are a lot of good reasons that we should be using SVGs, but they can seem complicated and scary. This video, which is part one of a mini-series exploring SVGs, looks at why we should be using SVGs and what they actually are (it stands for scalable vector graphic), and then the absolute, very basics of using them in your work. This video will be followed up by how to make your own SVGs, creating an icon system and adding in some basic animations. Also, I had some video issues with this one, so sorry for any quality issues. Already figured out the cause and it'll be fixed for the next video :). I also TOTALLY missed a part with the greenscreen, haha. Ooops. Inkscape (for vector software): https://inkscape.org/en/ Some useful SVG links that have helped me in the past and with rese...
published: 20 Jun 2018 -
How to create scalable vector graphics ( svg ) files || With Inkscape || for Android Studio
Hi !! Nice to meet you... In this video, I will show you how you can make a svg file with inkscape ... svg files are used in many places, specially in android applications where you have to show some pictures on the screen ... Hope you liked it...consider subscribing and sharing this video with your friends Earnest Request : I am trying to grow my channel . PLEASE SUBSCRIBE TO MY CHANNEL ... if you are not subscribing , please comment the reason so that I can atleast try to improve it ALSO , I have a lot of viewers who watch my videos daily but do not subscribe .... so a request: Please Subscribe ... a subscribe encourages me a lot and boosts my morale If you have any doubt , feel free to comment below and I will answer them as soon as possible THANKS A LOT.
published: 16 Sep 2021 -
75. Scalable Vector Graphics | SVG | Code with Mosh
published: 21 Oct 2024 -
Scalable Vector Graphics (SVG) Tutorial - Learn How to Use SVG
Learn more advanced front-end and full-stack development at: https://www.fullstackacademy.com SVG stands for Scalable Vector Graphics, an XML-based vector image format for two-dimensional graphics that supports animation and interactivity. In this SVG Tutorial, we will cover the basics of SVG so you can better understand this frequently misunderstood format and the powerful rendering abilities that it contains. Watch this video to learn: - What is SVG - How to use SVG - Unique features of the SVG format
published: 25 Sep 2017 -
Make Awesome SVG Animations with CSS // 7 Useful Techniques
Learn 7 useful SVG animation techniques to make beautiful graphics for your website. In this tutorial, we'll build two different SVGs from scratch and animate them CSS. Source code: https://github.com/fireship-io/animated-svg-demo 00:00 What we're building 00:42 What is an SVG? 02:22 1. Chrome Animation Inspector 03:11 2. Drawing Groups 05:10 3. Duotone CSS Variables 06:30 4. Transition Animations 07:41 5. JS events 08:36 6. Keyframe Animations 10:11 7. Animation Staggering #css #animation #tutorial Also see... SVG in 100 Seconds https://youtu.be/emFMHH2Bfvo CSS Keyframe Animation https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes SVG Docs https://developer.mozilla.org/en-US/docs/Web/SVG Install the quiz app 🤓 iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8 An...
published: 26 Mar 2021
developed with YouTube
2:20
SVG Explained in 100 Seconds
- Order: Reorder
- Duration: 2:20
- Uploaded Date: 24 Mar 2021
- views: 906975
What are Scalable Vector Graphics 🤏? How are vector images different than raster images? Learn the fundamentals of SVG in 100 seconds!
Learn more about web des...
What are Scalable Vector Graphics 🤏? How are vector images different than raster images? Learn the fundamentals of SVG in 100 seconds!
Learn more about web design, SVG, and CSS in this tutorial: https://fireship.io/lessons/css-cards-animated/
References:
Star Wars Animation https://codepen.io/nerdmanship/pen/ZLoyPG
Path Docs https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
#webdev #html #100SecondsOfCode
Install the quiz app 🤓
iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font
https://wn.com/Svg_Explained_In_100_Seconds
What are Scalable Vector Graphics 🤏? How are vector images different than raster images? Learn the fundamentals of SVG in 100 seconds!
Learn more about web design, SVG, and CSS in this tutorial: https://fireship.io/lessons/css-cards-animated/
References:
Star Wars Animation https://codepen.io/nerdmanship/pen/ZLoyPG
Path Docs https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
#webdev #html #100SecondsOfCode
Install the quiz app 🤓
iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font
18:00
Introduction to SVGs: A Beginner's Guide to Scalable Vector Graphics
- Order: Reorder
- Duration: 18:00
- Uploaded Date: 04 Jun 2024
- views: 2907
In this introduction to SVG, we cover basic shapes like circles and rectangles, styling, the path element, quadratic and cubic Bézier curves, arcs, and some fun...
In this introduction to SVG, we cover basic shapes like circles and rectangles, styling, the path element, quadratic and cubic Bézier curves, arcs, and some fun examples of how to animate SVG with CSS and make them interactive with JavaScript.
Learn more about SVGs at https://svg-tutorial.com
0:00 Introduction
0:21 SVG examples
1:28 SVG in HTML
2:21 The SVG element
4:13 Circle element and styling in SVG
6:13 Rectangle element and basic diagram in SVG
6:58 The Path element in SVG
8:56 Transformations in SVG
12:13 Quadratic Bezier Curve in SVG
14:20 Cubic Bezier Curve in SVG
16:07 Arcs in SVG
17:38 Next steps
Website — http://hunormarton.github.io/
CodePen — https://codepen.io/HunorMarton
Twitter — https://twitter.com/HunorBorbely
Some examples in the intro are from https://observablehq.com
Music: https://www.unminus.com/
#svg #webdevelopment #creativecoding
https://wn.com/Introduction_To_Svgs_A_Beginner's_Guide_To_Scalable_Vector_Graphics
In this introduction to SVG, we cover basic shapes like circles and rectangles, styling, the path element, quadratic and cubic Bézier curves, arcs, and some fun examples of how to animate SVG with CSS and make them interactive with JavaScript.
Learn more about SVGs at https://svg-tutorial.com
0:00 Introduction
0:21 SVG examples
1:28 SVG in HTML
2:21 The SVG element
4:13 Circle element and styling in SVG
6:13 Rectangle element and basic diagram in SVG
6:58 The Path element in SVG
8:56 Transformations in SVG
12:13 Quadratic Bezier Curve in SVG
14:20 Cubic Bezier Curve in SVG
16:07 Arcs in SVG
17:38 Next steps
Website — http://hunormarton.github.io/
CodePen — https://codepen.io/HunorMarton
Twitter — https://twitter.com/HunorBorbely
Some examples in the intro are from https://observablehq.com
Music: https://www.unminus.com/
#svg #webdevelopment #creativecoding
- published: 04 Jun 2024
- views: 2907
5:09
What are Scalable Vector Graphics (SVG) & how are they special? | Web Demystified, Episode 4
- Order: Reorder
- Duration: 5:09
- Uploaded Date: 29 May 2018
- views: 69462
In this episode, we discuss image formats, especially SVG (Scalable Vector Graphics), the only vector image format for the web. It has unique abilities that let...
In this episode, we discuss image formats, especially SVG (Scalable Vector Graphics), the only vector image format for the web. It has unique abilities that let us create awesome graphic effects and it's actually easier to create than you think.
If you're interested in learning more about SVGs, you can learn the basics of SVGs here in MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial
It's free and designed for people just getting started.
Want to sign up for the Mozilla Developer Newsletter? Get web development tips and tricks for devs of all levels: https://www.mozilla.org/en-US/newsletter/developer/
Web Demystified is a video series from Jeremie Patonnier designed to introduce the web in a way that's easy and understandable.
In Episode #0, we offered an overview of what the web is and how it works. Watch Episode 0 here: https://www.youtube.com/watch?v=O_GWbkXIqEY&list;=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g
In Episode #1, we offered an overview of HTML. Watch that here: https://www.youtube.com/watch?v=PORRrz3Y8Vc&list;=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g&index;=2
In Episode #2, we looked at CSS and checked out how it styles pages. Watch that here: https://www.youtube.com/watch?v=Y02yI1OfZjI&index;=3&list;=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g
In Episode #3, we checked out JavaScript and investigated what some have called "the most misunderstood language." Watch that here: https://www.youtube.com/watch?v=09XmbByy6Sk&index;=4&list;=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g
Links from the video:
- https://codepen.io/MyXoToD/post/howto-self-drawing-svg-animation
- https://css-tricks.com/gooey-effect/
- https://tympanus.net/Development/ElasticSVGElements/collapseexpand.html
Social links:
https://twitter.com/MozHacks
https://twitter.com/MozDevNet
Music:
Take Me Higher by Jahzzar under license CC-BY-SA
https://wn.com/What_Are_Scalable_Vector_Graphics_(Svg)_How_Are_They_Special_|_Web_Demystified,_Episode_4
In this episode, we discuss image formats, especially SVG (Scalable Vector Graphics), the only vector image format for the web. It has unique abilities that let us create awesome graphic effects and it's actually easier to create than you think.
If you're interested in learning more about SVGs, you can learn the basics of SVGs here in MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial
It's free and designed for people just getting started.
Want to sign up for the Mozilla Developer Newsletter? Get web development tips and tricks for devs of all levels: https://www.mozilla.org/en-US/newsletter/developer/
Web Demystified is a video series from Jeremie Patonnier designed to introduce the web in a way that's easy and understandable.
In Episode #0, we offered an overview of what the web is and how it works. Watch Episode 0 here: https://www.youtube.com/watch?v=O_GWbkXIqEY&list;=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g
In Episode #1, we offered an overview of HTML. Watch that here: https://www.youtube.com/watch?v=PORRrz3Y8Vc&list;=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g&index;=2
In Episode #2, we looked at CSS and checked out how it styles pages. Watch that here: https://www.youtube.com/watch?v=Y02yI1OfZjI&index;=3&list;=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g
In Episode #3, we checked out JavaScript and investigated what some have called "the most misunderstood language." Watch that here: https://www.youtube.com/watch?v=09XmbByy6Sk&index;=4&list;=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g
Links from the video:
- https://codepen.io/MyXoToD/post/howto-self-drawing-svg-animation
- https://css-tricks.com/gooey-effect/
- https://tympanus.net/Development/ElasticSVGElements/collapseexpand.html
Social links:
https://twitter.com/MozHacks
https://twitter.com/MozDevNet
Music:
Take Me Higher by Jahzzar under license CC-BY-SA
- published: 29 May 2018
- views: 69462
5:56
How Do Vector Graphics Work?
- Order: Reorder
- Duration: 5:56
- Uploaded Date: 18 Oct 2016
- views: 643879
Vector graphics allow you to rescale images to any size without losing quality! How does that work?
Thanks to Pearl Auto for supporting Tech Quickie. Go to htt...
Vector graphics allow you to rescale images to any size without losing quality! How does that work?
Thanks to Pearl Auto for supporting Tech Quickie. Go to http://pearlauto.com/techquickie to get FREE two-day shipping!
Follow: http://twitter.com/linustech
Join the community: http://linustechtips.com
https://wn.com/How_Do_Vector_Graphics_Work
Vector graphics allow you to rescale images to any size without losing quality! How does that work?
Thanks to Pearl Auto for supporting Tech Quickie. Go to http://pearlauto.com/techquickie to get FREE two-day shipping!
Follow: http://twitter.com/linustech
Join the community: http://linustechtips.com
- published: 18 Oct 2016
- views: 643879
1:57
Use Scalable Vector Graphics in Your Presentation || ICONIC ACADEMY
- Order: Reorder
- Duration: 1:57
- Uploaded Date: 05 Sep 2022
- views: 108
#msoffice #video
Even though that millions of PowerPoint slides are created each year, the majority of them lack audience engagement. Many of those are challen...
#msoffice #video
Even though that millions of PowerPoint slides are created each year, the majority of them lack audience engagement. Many of those are challenging to read as well as comprehend.
Like many other things in life, a few simple adjustments may take our presentations to entirely new levels.
When some of these modifications are highlighted, they almost seem like common sense, but most people think they are brilliant ideas.
https://wn.com/Use_Scalable_Vector_Graphics_In_Your_Presentation_||_Iconic_Academy
#msoffice #video
Even though that millions of PowerPoint slides are created each year, the majority of them lack audience engagement. Many of those are challenging to read as well as comprehend.
Like many other things in life, a few simple adjustments may take our presentations to entirely new levels.
When some of these modifications are highlighted, they almost seem like common sense, but most people think they are brilliant ideas.
- published: 05 Sep 2022
- views: 108
1:00
Creating your first SVG!
- Order: Reorder
- Duration: 1:00
- Uploaded Date: 21 Jul 2022
- views: 58287
Creating your first SVG!
Like and Subscribe for more Cricut, Canva, and sublimation tutorials!
Creating your first SVG!
Like and Subscribe for more Cricut, Canva, and sublimation tutorials!
https://wn.com/Creating_Your_First_Svg
Creating your first SVG!
Like and Subscribe for more Cricut, Canva, and sublimation tutorials!
- published: 21 Jul 2022
- views: 58287
1:01
Difference Between Raster and Vector!
- Order: Reorder
- Duration: 1:01
- Uploaded Date: 29 Oct 2022
- views: 3668154
- published: 29 Oct 2022
- views: 3668154
9:39
SVGs (Scalable Vector Graphics) - HTML Tutorial (Part 15)
- Order: Reorder
- Duration: 9:39
- Uploaded Date: 06 Feb 2022
- views: 322
SVGs are easily used with HTML! SVGs deserves it own course, so in this tutorial I only cover the basics, but there are a lot you can still learn about them!
S...
SVGs are easily used with HTML! SVGs deserves it own course, so in this tutorial I only cover the basics, but there are a lot you can still learn about them!
Subscribe for more videos!
YouTube: https://www.youtube.com/stevesteacher?sub_confirmation=1
Odysee: https://odysee.com/$/invite/@stevesteacher:0
For more programming videos, feel free to subscribe to my 2nd channel: https://www.youtube.com/channel/UCZkCdex94Hp-3Aa-42kPhHg
Python Programming Tutorials: https://www.youtube.com/playlist?list=PLYBJzqz8zpWasL5mTe0t9W2cXrv7rnnsG
C++ Programming Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWZkX3y8sl8Fbi4mRze4SiPw
Lua Programming Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWavt37pA6NANJTGStIHpybU
Become a Web Developer: https://youtube.com/playlist?list=PLYBJzqz8zpWbsmFurxBg2Pm-mlBmJdXbh
HTML Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWbQj-bLou8fOYgnDrrbKdAZ
TKinter Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWZwVkeu2E5Hjw5ImK7SzMe3
Linux Tutorials/Videos: https://youtube.com/playlist?list=PLYBJzqz8zpWYnUtUeVahkfIeYNKkLRMfZ
Delphi Programming Tutorials: https://www.youtube.com/playlist?list=PLYBJzqz8zpWbKtfi2EiYTv4TeaWcR1I6k
Web Scraping/Beautiful Soup Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWYfL1pYs4FG8Ed0Cf3sookG
Love2D Game Dev Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWYip5ZkTMQiOkqya9Iiefm9
Godot Game Dev Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWZT3jepx1vY1nwhaC-T8wB2
How-to videos: https://www.youtube.com/playlist?list=PLYBJzqz8zpWbp2DxyVGUCqxSZaCwDvU3C
Crash Courses: https://www.youtube.com/playlist?list=PLYBJzqz8zpWbmPw2E0ywUEuhw6FEwVR0U
MySQL Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWaBcVuneV9g4zbKsmMCo-rR
Japanese Lessons: https://www.youtube.com/playlist?list=PLYBJzqz8zpWYy-iJ0xckeOjCCE2roN9Ww
Group Chats:
Weeb Chat: https://t.me/weeb_haven
Programmer Haven: https://t.me/programmer_haven
You can contact me on:
Email: StevesTeacherYT@gmail.com
Discord: https://discord.gg/NGtD9s6
Kitsu: https://kitsu.io/users/Netsu
Twitter: @stevesteacherYT or click here: https://twitter.com/stevesteacherYT?s=09
Hey there!!! Wanna help support the channel :D? You can donate on PayPal: https://paypal.me/stephenvdw?locale.x=en_US
Any suggestions? Leave it in the comment section or contact me somewhere else!
Odysee Links:
Python Programming Tutorials: https://odysee.com/@stevesteacher:0/Python-Tutorials:5?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
C++ Programming Tutorials: https://odysee.com/@stevesteacher:0/Cpp-Tutorials:d?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
HTML Tutorials: https://odysee.com/@stevesteacher:0/HTML-Tutorials:9?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
Tkinter Tutorials: https://odysee.com/@stevesteacher:0/Tkinter-Tutorials:d?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
Linux Tutorials: https://odysee.com/@stevesteacher:0/Linux-Terminal-Tutorials:7?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
Lua Tutorials: https://odysee.com/@stevesteacher:0/Lua-Tutorials:0?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
Love2D Game Dev Tutorials: https://odysee.com/@stevesteacher:0/Love2D:f
Delphi Tutorials: https://odysee.com/@stevesteacher:0/Delphi-Tutorials:4?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
MySQL Tutorials: https://odysee.com/@stevesteacher:0/MySQL-Tutorials:c?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
Thank you for watching!
#stevesteacher #html #learnwebdev #learnhtml
https://wn.com/Svgs_(Scalable_Vector_Graphics)_Html_Tutorial_(Part_15)
SVGs are easily used with HTML! SVGs deserves it own course, so in this tutorial I only cover the basics, but there are a lot you can still learn about them!
Subscribe for more videos!
YouTube: https://www.youtube.com/stevesteacher?sub_confirmation=1
Odysee: https://odysee.com/$/invite/@stevesteacher:0
For more programming videos, feel free to subscribe to my 2nd channel: https://www.youtube.com/channel/UCZkCdex94Hp-3Aa-42kPhHg
Python Programming Tutorials: https://www.youtube.com/playlist?list=PLYBJzqz8zpWasL5mTe0t9W2cXrv7rnnsG
C++ Programming Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWZkX3y8sl8Fbi4mRze4SiPw
Lua Programming Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWavt37pA6NANJTGStIHpybU
Become a Web Developer: https://youtube.com/playlist?list=PLYBJzqz8zpWbsmFurxBg2Pm-mlBmJdXbh
HTML Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWbQj-bLou8fOYgnDrrbKdAZ
TKinter Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWZwVkeu2E5Hjw5ImK7SzMe3
Linux Tutorials/Videos: https://youtube.com/playlist?list=PLYBJzqz8zpWYnUtUeVahkfIeYNKkLRMfZ
Delphi Programming Tutorials: https://www.youtube.com/playlist?list=PLYBJzqz8zpWbKtfi2EiYTv4TeaWcR1I6k
Web Scraping/Beautiful Soup Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWYfL1pYs4FG8Ed0Cf3sookG
Love2D Game Dev Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWYip5ZkTMQiOkqya9Iiefm9
Godot Game Dev Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWZT3jepx1vY1nwhaC-T8wB2
How-to videos: https://www.youtube.com/playlist?list=PLYBJzqz8zpWbp2DxyVGUCqxSZaCwDvU3C
Crash Courses: https://www.youtube.com/playlist?list=PLYBJzqz8zpWbmPw2E0ywUEuhw6FEwVR0U
MySQL Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWaBcVuneV9g4zbKsmMCo-rR
Japanese Lessons: https://www.youtube.com/playlist?list=PLYBJzqz8zpWYy-iJ0xckeOjCCE2roN9Ww
Group Chats:
Weeb Chat: https://t.me/weeb_haven
Programmer Haven: https://t.me/programmer_haven
You can contact me on:
Email: StevesTeacherYT@gmail.com
Discord: https://discord.gg/NGtD9s6
Kitsu: https://kitsu.io/users/Netsu
Twitter: @stevesteacherYT or click here: https://twitter.com/stevesteacherYT?s=09
Hey there!!! Wanna help support the channel :D? You can donate on PayPal: https://paypal.me/stephenvdw?locale.x=en_US
Any suggestions? Leave it in the comment section or contact me somewhere else!
Odysee Links:
Python Programming Tutorials: https://odysee.com/@stevesteacher:0/Python-Tutorials:5?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
C++ Programming Tutorials: https://odysee.com/@stevesteacher:0/Cpp-Tutorials:d?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
HTML Tutorials: https://odysee.com/@stevesteacher:0/HTML-Tutorials:9?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
Tkinter Tutorials: https://odysee.com/@stevesteacher:0/Tkinter-Tutorials:d?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
Linux Tutorials: https://odysee.com/@stevesteacher:0/Linux-Terminal-Tutorials:7?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
Lua Tutorials: https://odysee.com/@stevesteacher:0/Lua-Tutorials:0?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
Love2D Game Dev Tutorials: https://odysee.com/@stevesteacher:0/Love2D:f
Delphi Tutorials: https://odysee.com/@stevesteacher:0/Delphi-Tutorials:4?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
MySQL Tutorials: https://odysee.com/@stevesteacher:0/MySQL-Tutorials:c?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
Thank you for watching!
#stevesteacher #html #learnwebdev #learnhtml
- published: 06 Feb 2022
- views: 322
1:01
The best FREE SVG Box Design Generator?
- Order: Reorder
- Duration: 1:01
- Uploaded Date: 04 Jan 2025
- views: 14602
#lasercutting #woodbox #svg #laserengraving #lasercuttingmachine #box #xtool #lightburn #glowforge #cncmachine #craft
This video is an introduction to Basic B...
#lasercutting #woodbox #svg #laserengraving #lasercuttingmachine #box #xtool #lightburn #glowforge #cncmachine #craft
This video is an introduction to Basic Box Designer, a FREE SVG box design generator used to produce an SVG output file to be used on a laser or CNC cutting machine I guarantee this amazing FREE SVG box design generator will become an important tool for creating those custom size boxes you need. This will save you time and frustration. So, give it a try. Head on over to 'cutgen.io' and sign-up for a FREE account to get started. You will not be disappointed.
website: cutgen.io
https://wn.com/The_Best_Free_Svg_Box_Design_Generator
#lasercutting #woodbox #svg #laserengraving #lasercuttingmachine #box #xtool #lightburn #glowforge #cncmachine #craft
This video is an introduction to Basic Box Designer, a FREE SVG box design generator used to produce an SVG output file to be used on a laser or CNC cutting machine I guarantee this amazing FREE SVG box design generator will become an important tool for creating those custom size boxes you need. This will save you time and frustration. So, give it a try. Head on over to 'cutgen.io' and sign-up for a FREE account to get started. You will not be disappointed.
website: cutgen.io
- published: 04 Jan 2025
- views: 14602
14:22
A beginners guide to SVG | Part One: The Why, What, and How
- Order: Reorder
- Duration: 14:22
- Uploaded Date: 20 Jun 2018
- views: 366044
There are a lot of good reasons that we should be using SVGs, but they can seem complicated and scary. This video, which is part one of a mini-series exploring ...
There are a lot of good reasons that we should be using SVGs, but they can seem complicated and scary. This video, which is part one of a mini-series exploring SVGs, looks at why we should be using SVGs and what they actually are (it stands for scalable vector graphic), and then the absolute, very basics of using them in your work.
This video will be followed up by how to make your own SVGs, creating an icon system and adding in some basic animations.
Also, I had some video issues with this one, so sorry for any quality issues. Already figured out the cause and it'll be fixed for the next video :). I also TOTALLY missed a part with the greenscreen, haha. Ooops.
Inkscape (for vector software): https://inkscape.org/en/
Some useful SVG links that have helped me in the past and with researching for this series:
http://unicorn-ui.com/blog/svg-for-beginners.html
https://rafaltomal.com/svg-guide/
https://css-tricks.com/using-svg/
https://css-tricks.com/svg-line-animation-works/
https://css-tricks.com/svg-use-with-external-reference-take-2/
http://taye.me/blog/svg/a-guide-to-svg-use-elements/
https://frontstuff.io/multi-colored-svg-symbol-icons-with-css-variables
---
New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - https://code.visualstudio.com/
How my browser refreshes when I save: https://youtu.be/h24noHYsuGc
---
Support me on Patreon: https://www.patreon.com/kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
https://wn.com/A_Beginners_Guide_To_Svg_|_Part_One_The_Why,_What,_And_How
There are a lot of good reasons that we should be using SVGs, but they can seem complicated and scary. This video, which is part one of a mini-series exploring SVGs, looks at why we should be using SVGs and what they actually are (it stands for scalable vector graphic), and then the absolute, very basics of using them in your work.
This video will be followed up by how to make your own SVGs, creating an icon system and adding in some basic animations.
Also, I had some video issues with this one, so sorry for any quality issues. Already figured out the cause and it'll be fixed for the next video :). I also TOTALLY missed a part with the greenscreen, haha. Ooops.
Inkscape (for vector software): https://inkscape.org/en/
Some useful SVG links that have helped me in the past and with researching for this series:
http://unicorn-ui.com/blog/svg-for-beginners.html
https://rafaltomal.com/svg-guide/
https://css-tricks.com/using-svg/
https://css-tricks.com/svg-line-animation-works/
https://css-tricks.com/svg-use-with-external-reference-take-2/
http://taye.me/blog/svg/a-guide-to-svg-use-elements/
https://frontstuff.io/multi-colored-svg-symbol-icons-with-css-variables
---
New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - https://code.visualstudio.com/
How my browser refreshes when I save: https://youtu.be/h24noHYsuGc
---
Support me on Patreon: https://www.patreon.com/kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
- published: 20 Jun 2018
- views: 366044
1:09
How to create scalable vector graphics ( svg ) files || With Inkscape || for Android Studio
- Order: Reorder
- Duration: 1:09
- Uploaded Date: 16 Sep 2021
- views: 1122
Hi !! Nice to meet you... In this video, I will show you how you can make a svg file with inkscape ... svg files are used in many places, specially in android ...
Hi !! Nice to meet you... In this video, I will show you how you can make a svg file with inkscape ... svg files are used in many places, specially in android applications where you have to show some pictures on the screen ...
Hope you liked it...consider subscribing and sharing this video with your friends
Earnest Request :
I am trying to grow my channel . PLEASE SUBSCRIBE TO MY CHANNEL ... if you are not subscribing , please comment the reason so that I can atleast try to improve it
ALSO ,
I have a lot of viewers who watch my videos daily but do not subscribe .... so a request: Please Subscribe ... a subscribe encourages me a lot and boosts my morale
If you have any doubt , feel free to comment below and I will answer them as soon as possible
THANKS A LOT.
https://wn.com/How_To_Create_Scalable_Vector_Graphics_(_Svg_)_Files_||_With_Inkscape_||_For_Android_Studio
Hi !! Nice to meet you... In this video, I will show you how you can make a svg file with inkscape ... svg files are used in many places, specially in android applications where you have to show some pictures on the screen ...
Hope you liked it...consider subscribing and sharing this video with your friends
Earnest Request :
I am trying to grow my channel . PLEASE SUBSCRIBE TO MY CHANNEL ... if you are not subscribing , please comment the reason so that I can atleast try to improve it
ALSO ,
I have a lot of viewers who watch my videos daily but do not subscribe .... so a request: Please Subscribe ... a subscribe encourages me a lot and boosts my morale
If you have any doubt , feel free to comment below and I will answer them as soon as possible
THANKS A LOT.
- published: 16 Sep 2021
- views: 1122
2:17
75. Scalable Vector Graphics | SVG | Code with Mosh
- Order: Reorder
- Duration: 2:17
- Uploaded Date: 21 Oct 2024
- views: 73
- published: 21 Oct 2024
- views: 73
10:01
Scalable Vector Graphics (SVG) Tutorial - Learn How to Use SVG
- Order: Reorder
- Duration: 10:01
- Uploaded Date: 25 Sep 2017
- views: 5473
Learn more advanced front-end and full-stack development at: https://www.fullstackacademy.com
SVG stands for Scalable Vector Graphics, an XML-based vector imag...
Learn more advanced front-end and full-stack development at: https://www.fullstackacademy.com
SVG stands for Scalable Vector Graphics, an XML-based vector image format for two-dimensional graphics that supports animation and interactivity. In this SVG Tutorial, we will cover the basics of SVG so you can better understand this frequently misunderstood format and the powerful rendering abilities that it contains.
Watch this video to learn:
- What is SVG
- How to use SVG
- Unique features of the SVG format
https://wn.com/Scalable_Vector_Graphics_(Svg)_Tutorial_Learn_How_To_Use_Svg
Learn more advanced front-end and full-stack development at: https://www.fullstackacademy.com
SVG stands for Scalable Vector Graphics, an XML-based vector image format for two-dimensional graphics that supports animation and interactivity. In this SVG Tutorial, we will cover the basics of SVG so you can better understand this frequently misunderstood format and the powerful rendering abilities that it contains.
Watch this video to learn:
- What is SVG
- How to use SVG
- Unique features of the SVG format
- published: 25 Sep 2017
- views: 5473
12:20
Make Awesome SVG Animations with CSS // 7 Useful Techniques
- Order: Reorder
- Duration: 12:20
- Uploaded Date: 26 Mar 2021
- views: 1012781
Learn 7 useful SVG animation techniques to make beautiful graphics for your website. In this tutorial, we'll build two different SVGs from scratch and animate t...
Learn 7 useful SVG animation techniques to make beautiful graphics for your website. In this tutorial, we'll build two different SVGs from scratch and animate them CSS. Source code: https://github.com/fireship-io/animated-svg-demo
00:00 What we're building
00:42 What is an SVG?
02:22 1. Chrome Animation Inspector
03:11 2. Drawing Groups
05:10 3. Duotone CSS Variables
06:30 4. Transition Animations
07:41 5. JS events
08:36 6. Keyframe Animations
10:11 7. Animation Staggering
#css #animation #tutorial
Also see...
SVG in 100 Seconds https://youtu.be/emFMHH2Bfvo
CSS Keyframe Animation https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
SVG Docs https://developer.mozilla.org/en-US/docs/Web/SVG
Install the quiz app 🤓
iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font
https://wn.com/Make_Awesome_Svg_Animations_With_Css_7_Useful_Techniques
Learn 7 useful SVG animation techniques to make beautiful graphics for your website. In this tutorial, we'll build two different SVGs from scratch and animate them CSS. Source code: https://github.com/fireship-io/animated-svg-demo
00:00 What we're building
00:42 What is an SVG?
02:22 1. Chrome Animation Inspector
03:11 2. Drawing Groups
05:10 3. Duotone CSS Variables
06:30 4. Transition Animations
07:41 5. JS events
08:36 6. Keyframe Animations
10:11 7. Animation Staggering
#css #animation #tutorial
Also see...
SVG in 100 Seconds https://youtu.be/emFMHH2Bfvo
CSS Keyframe Animation https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
SVG Docs https://developer.mozilla.org/en-US/docs/Web/SVG
Install the quiz app 🤓
iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font
- published: 26 Mar 2021
- views: 1012781
2:20
SVG Explained in 100 Seconds
What are Scalable Vector Graphics 🤏? How are vector images different than raster images? L...
published: 24 Mar 2021
SVG Explained in 100 Seconds
SVG Explained in 100 Seconds
- Report rights infringement
- published: 24 Mar 2021
- views: 906975
What are Scalable Vector Graphics 🤏? How are vector images different than raster images? Learn the fundamentals of SVG in 100 seconds!
Learn more about web design, SVG, and CSS in this tutorial: https://fireship.io/lessons/css-cards-animated/
References:
Star Wars Animation https://codepen.io/nerdmanship/pen/ZLoyPG
Path Docs https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
#webdev #html #100SecondsOfCode
Install the quiz app 🤓
iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font
18:00
Introduction to SVGs: A Beginner's Guide to Scalable Vector Graphics
In this introduction to SVG, we cover basic shapes like circles and rectangles, styling, t...
published: 04 Jun 2024
Introduction to SVGs: A Beginner's Guide to Scalable Vector Graphics
Introduction to SVGs: A Beginner's Guide to Scalable Vector Graphics
- Report rights infringement
- published: 04 Jun 2024
- views: 2907
In this introduction to SVG, we cover basic shapes like circles and rectangles, styling, the path element, quadratic and cubic Bézier curves, arcs, and some fun examples of how to animate SVG with CSS and make them interactive with JavaScript.
Learn more about SVGs at https://svg-tutorial.com
0:00 Introduction
0:21 SVG examples
1:28 SVG in HTML
2:21 The SVG element
4:13 Circle element and styling in SVG
6:13 Rectangle element and basic diagram in SVG
6:58 The Path element in SVG
8:56 Transformations in SVG
12:13 Quadratic Bezier Curve in SVG
14:20 Cubic Bezier Curve in SVG
16:07 Arcs in SVG
17:38 Next steps
Website — http://hunormarton.github.io/
CodePen — https://codepen.io/HunorMarton
Twitter — https://twitter.com/HunorBorbely
Some examples in the intro are from https://observablehq.com
Music: https://www.unminus.com/
#svg #webdevelopment #creativecoding
5:09
What are Scalable Vector Graphics (SVG) & how are they special? | Web Demystified, Episode 4
In this episode, we discuss image formats, especially SVG (Scalable Vector Graphics), the ...
published: 29 May 2018
What are Scalable Vector Graphics (SVG) & how are they special? | Web Demystified, Episode 4
What are Scalable Vector Graphics (SVG) & how are they special? | Web Demystified, Episode 4
- Report rights infringement
- published: 29 May 2018
- views: 69462
In this episode, we discuss image formats, especially SVG (Scalable Vector Graphics), the only vector image format for the web. It has unique abilities that let us create awesome graphic effects and it's actually easier to create than you think.
If you're interested in learning more about SVGs, you can learn the basics of SVGs here in MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial
It's free and designed for people just getting started.
Want to sign up for the Mozilla Developer Newsletter? Get web development tips and tricks for devs of all levels: https://www.mozilla.org/en-US/newsletter/developer/
Web Demystified is a video series from Jeremie Patonnier designed to introduce the web in a way that's easy and understandable.
In Episode #0, we offered an overview of what the web is and how it works. Watch Episode 0 here: https://www.youtube.com/watch?v=O_GWbkXIqEY&list;=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g
In Episode #1, we offered an overview of HTML. Watch that here: https://www.youtube.com/watch?v=PORRrz3Y8Vc&list;=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g&index;=2
In Episode #2, we looked at CSS and checked out how it styles pages. Watch that here: https://www.youtube.com/watch?v=Y02yI1OfZjI&index;=3&list;=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g
In Episode #3, we checked out JavaScript and investigated what some have called "the most misunderstood language." Watch that here: https://www.youtube.com/watch?v=09XmbByy6Sk&index;=4&list;=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g
Links from the video:
- https://codepen.io/MyXoToD/post/howto-self-drawing-svg-animation
- https://css-tricks.com/gooey-effect/
- https://tympanus.net/Development/ElasticSVGElements/collapseexpand.html
Social links:
https://twitter.com/MozHacks
https://twitter.com/MozDevNet
Music:
Take Me Higher by Jahzzar under license CC-BY-SA
5:56
How Do Vector Graphics Work?
Vector graphics allow you to rescale images to any size without losing quality! How does t...
published: 18 Oct 2016
How Do Vector Graphics Work?
How Do Vector Graphics Work?
- Report rights infringement
- published: 18 Oct 2016
- views: 643879
Vector graphics allow you to rescale images to any size without losing quality! How does that work?
Thanks to Pearl Auto for supporting Tech Quickie. Go to http://pearlauto.com/techquickie to get FREE two-day shipping!
Follow: http://twitter.com/linustech
Join the community: http://linustechtips.com
1:57
Use Scalable Vector Graphics in Your Presentation || ICONIC ACADEMY
#msoffice #video
Even though that millions of PowerPoint slides are created each year, th...
published: 05 Sep 2022
Use Scalable Vector Graphics in Your Presentation || ICONIC ACADEMY
Use Scalable Vector Graphics in Your Presentation || ICONIC ACADEMY
- Report rights infringement
- published: 05 Sep 2022
- views: 108
#msoffice #video
Even though that millions of PowerPoint slides are created each year, the majority of them lack audience engagement. Many of those are challenging to read as well as comprehend.
Like many other things in life, a few simple adjustments may take our presentations to entirely new levels.
When some of these modifications are highlighted, they almost seem like common sense, but most people think they are brilliant ideas.
1:00
Creating your first SVG!
Creating your first SVG!
Like and Subscribe for more Cricut, Canva, and sublimation tutor...
published: 21 Jul 2022
Creating your first SVG!
Creating your first SVG!
- Report rights infringement
- published: 21 Jul 2022
- views: 58287
Creating your first SVG!
Like and Subscribe for more Cricut, Canva, and sublimation tutorials!
1:01
Difference Between Raster and Vector!
published: 29 Oct 2022
Difference Between Raster and Vector!
Difference Between Raster and Vector!
- Report rights infringement
- published: 29 Oct 2022
- views: 3668154
9:39
SVGs (Scalable Vector Graphics) - HTML Tutorial (Part 15)
SVGs are easily used with HTML! SVGs deserves it own course, so in this tutorial I only co...
published: 06 Feb 2022
SVGs (Scalable Vector Graphics) - HTML Tutorial (Part 15)
SVGs (Scalable Vector Graphics) - HTML Tutorial (Part 15)
- Report rights infringement
- published: 06 Feb 2022
- views: 322
SVGs are easily used with HTML! SVGs deserves it own course, so in this tutorial I only cover the basics, but there are a lot you can still learn about them!
Subscribe for more videos!
YouTube: https://www.youtube.com/stevesteacher?sub_confirmation=1
Odysee: https://odysee.com/$/invite/@stevesteacher:0
For more programming videos, feel free to subscribe to my 2nd channel: https://www.youtube.com/channel/UCZkCdex94Hp-3Aa-42kPhHg
Python Programming Tutorials: https://www.youtube.com/playlist?list=PLYBJzqz8zpWasL5mTe0t9W2cXrv7rnnsG
C++ Programming Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWZkX3y8sl8Fbi4mRze4SiPw
Lua Programming Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWavt37pA6NANJTGStIHpybU
Become a Web Developer: https://youtube.com/playlist?list=PLYBJzqz8zpWbsmFurxBg2Pm-mlBmJdXbh
HTML Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWbQj-bLou8fOYgnDrrbKdAZ
TKinter Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWZwVkeu2E5Hjw5ImK7SzMe3
Linux Tutorials/Videos: https://youtube.com/playlist?list=PLYBJzqz8zpWYnUtUeVahkfIeYNKkLRMfZ
Delphi Programming Tutorials: https://www.youtube.com/playlist?list=PLYBJzqz8zpWbKtfi2EiYTv4TeaWcR1I6k
Web Scraping/Beautiful Soup Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWYfL1pYs4FG8Ed0Cf3sookG
Love2D Game Dev Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWYip5ZkTMQiOkqya9Iiefm9
Godot Game Dev Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWZT3jepx1vY1nwhaC-T8wB2
How-to videos: https://www.youtube.com/playlist?list=PLYBJzqz8zpWbp2DxyVGUCqxSZaCwDvU3C
Crash Courses: https://www.youtube.com/playlist?list=PLYBJzqz8zpWbmPw2E0ywUEuhw6FEwVR0U
MySQL Tutorials: https://youtube.com/playlist?list=PLYBJzqz8zpWaBcVuneV9g4zbKsmMCo-rR
Japanese Lessons: https://www.youtube.com/playlist?list=PLYBJzqz8zpWYy-iJ0xckeOjCCE2roN9Ww
Group Chats:
Weeb Chat: https://t.me/weeb_haven
Programmer Haven: https://t.me/programmer_haven
You can contact me on:
Email: StevesTeacherYT@gmail.com
Discord: https://discord.gg/NGtD9s6
Kitsu: https://kitsu.io/users/Netsu
Twitter: @stevesteacherYT or click here: https://twitter.com/stevesteacherYT?s=09
Hey there!!! Wanna help support the channel :D? You can donate on PayPal: https://paypal.me/stephenvdw?locale.x=en_US
Any suggestions? Leave it in the comment section or contact me somewhere else!
Odysee Links:
Python Programming Tutorials: https://odysee.com/@stevesteacher:0/Python-Tutorials:5?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
C++ Programming Tutorials: https://odysee.com/@stevesteacher:0/Cpp-Tutorials:d?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
HTML Tutorials: https://odysee.com/@stevesteacher:0/HTML-Tutorials:9?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
Tkinter Tutorials: https://odysee.com/@stevesteacher:0/Tkinter-Tutorials:d?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
Linux Tutorials: https://odysee.com/@stevesteacher:0/Linux-Terminal-Tutorials:7?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
Lua Tutorials: https://odysee.com/@stevesteacher:0/Lua-Tutorials:0?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
Love2D Game Dev Tutorials: https://odysee.com/@stevesteacher:0/Love2D:f
Delphi Tutorials: https://odysee.com/@stevesteacher:0/Delphi-Tutorials:4?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
MySQL Tutorials: https://odysee.com/@stevesteacher:0/MySQL-Tutorials:c?r=7wEp27kZSg8dDKtQWMJam6CbMAizo9Vt
Thank you for watching!
#stevesteacher #html #learnwebdev #learnhtml
1:01
The best FREE SVG Box Design Generator?
#lasercutting #woodbox #svg #laserengraving #lasercuttingmachine #box #xtool #lightburn #g...
published: 04 Jan 2025
The best FREE SVG Box Design Generator?
The best FREE SVG Box Design Generator?
- Report rights infringement
- published: 04 Jan 2025
- views: 14602
#lasercutting #woodbox #svg #laserengraving #lasercuttingmachine #box #xtool #lightburn #glowforge #cncmachine #craft
This video is an introduction to Basic Box Designer, a FREE SVG box design generator used to produce an SVG output file to be used on a laser or CNC cutting machine I guarantee this amazing FREE SVG box design generator will become an important tool for creating those custom size boxes you need. This will save you time and frustration. So, give it a try. Head on over to 'cutgen.io' and sign-up for a FREE account to get started. You will not be disappointed.
website: cutgen.io
14:22
A beginners guide to SVG | Part One: The Why, What, and How
There are a lot of good reasons that we should be using SVGs, but they can seem complicate...
published: 20 Jun 2018
A beginners guide to SVG | Part One: The Why, What, and How
A beginners guide to SVG | Part One: The Why, What, and How
- Report rights infringement
- published: 20 Jun 2018
- views: 366044
There are a lot of good reasons that we should be using SVGs, but they can seem complicated and scary. This video, which is part one of a mini-series exploring SVGs, looks at why we should be using SVGs and what they actually are (it stands for scalable vector graphic), and then the absolute, very basics of using them in your work.
This video will be followed up by how to make your own SVGs, creating an icon system and adding in some basic animations.
Also, I had some video issues with this one, so sorry for any quality issues. Already figured out the cause and it'll be fixed for the next video :). I also TOTALLY missed a part with the greenscreen, haha. Ooops.
Inkscape (for vector software): https://inkscape.org/en/
Some useful SVG links that have helped me in the past and with researching for this series:
http://unicorn-ui.com/blog/svg-for-beginners.html
https://rafaltomal.com/svg-guide/
https://css-tricks.com/using-svg/
https://css-tricks.com/svg-line-animation-works/
https://css-tricks.com/svg-use-with-external-reference-take-2/
http://taye.me/blog/svg/a-guide-to-svg-use-elements/
https://frontstuff.io/multi-colored-svg-symbol-icons-with-css-variables
---
New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - https://code.visualstudio.com/
How my browser refreshes when I save: https://youtu.be/h24noHYsuGc
---
Support me on Patreon: https://www.patreon.com/kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
1:09
How to create scalable vector graphics ( svg ) files || With Inkscape || for Android Studio
Hi !! Nice to meet you... In this video, I will show you how you can make a svg file with...
published: 16 Sep 2021
How to create scalable vector graphics ( svg ) files || With Inkscape || for Android Studio
How to create scalable vector graphics ( svg ) files || With Inkscape || for Android Studio
- Report rights infringement
- published: 16 Sep 2021
- views: 1122
Hi !! Nice to meet you... In this video, I will show you how you can make a svg file with inkscape ... svg files are used in many places, specially in android applications where you have to show some pictures on the screen ...
Hope you liked it...consider subscribing and sharing this video with your friends
Earnest Request :
I am trying to grow my channel . PLEASE SUBSCRIBE TO MY CHANNEL ... if you are not subscribing , please comment the reason so that I can atleast try to improve it
ALSO ,
I have a lot of viewers who watch my videos daily but do not subscribe .... so a request: Please Subscribe ... a subscribe encourages me a lot and boosts my morale
If you have any doubt , feel free to comment below and I will answer them as soon as possible
THANKS A LOT.
2:17
75. Scalable Vector Graphics | SVG | Code with Mosh
published: 21 Oct 2024
75. Scalable Vector Graphics | SVG | Code with Mosh
75. Scalable Vector Graphics | SVG | Code with Mosh
- Report rights infringement
- published: 21 Oct 2024
- views: 73
10:01
Scalable Vector Graphics (SVG) Tutorial - Learn How to Use SVG
Learn more advanced front-end and full-stack development at: https://www.fullstackacademy....
published: 25 Sep 2017
Scalable Vector Graphics (SVG) Tutorial - Learn How to Use SVG
Scalable Vector Graphics (SVG) Tutorial - Learn How to Use SVG
- Report rights infringement
- published: 25 Sep 2017
- views: 5473
Learn more advanced front-end and full-stack development at: https://www.fullstackacademy.com
SVG stands for Scalable Vector Graphics, an XML-based vector image format for two-dimensional graphics that supports animation and interactivity. In this SVG Tutorial, we will cover the basics of SVG so you can better understand this frequently misunderstood format and the powerful rendering abilities that it contains.
Watch this video to learn:
- What is SVG
- How to use SVG
- Unique features of the SVG format
12:20
Make Awesome SVG Animations with CSS // 7 Useful Techniques
Learn 7 useful SVG animation techniques to make beautiful graphics for your website. In th...
published: 26 Mar 2021
Make Awesome SVG Animations with CSS // 7 Useful Techniques
Make Awesome SVG Animations with CSS // 7 Useful Techniques
- Report rights infringement
- published: 26 Mar 2021
- views: 1012781
Learn 7 useful SVG animation techniques to make beautiful graphics for your website. In this tutorial, we'll build two different SVGs from scratch and animate them CSS. Source code: https://github.com/fireship-io/animated-svg-demo
00:00 What we're building
00:42 What is an SVG?
02:22 1. Chrome Animation Inspector
03:11 2. Drawing Groups
05:10 3. Duotone CSS Variables
06:30 4. Transition Animations
07:41 5. JS events
08:36 6. Keyframe Animations
10:11 7. Animation Staggering
#css #animation #tutorial
Also see...
SVG in 100 Seconds https://youtu.be/emFMHH2Bfvo
CSS Keyframe Animation https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
SVG Docs https://developer.mozilla.org/en-US/docs/Web/SVG
Install the quiz app 🤓
iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font
Scalable Vector Graphics
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.
SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, but are more often created with drawing software.
All major modern web browsers—including Mozilla Firefox, Internet Explorer, Google Chrome, Opera, and Safari—have at least some degree of SVG rendering support.
Overview
SVG has been in development since 1999 by a group of companies within the W3C after the competing standards Precision Graphics Markup Language (PGML, developed from Adobe's PostScript) and Vector Markup Language (VML, developed from Microsoft's RTF) were submitted to W3C in 1998. SVG drew on experience from the designs of both those formats.
This page contains text from Wikipedia, the Free Encyclopedia - https://wn.com/Scalable_Vector_Graphics
SVG Explained in 100 Seconds...
Introduction to SVGs: A Beginner's Guide to Scalab...
What are Scalable Vector Graphics (SVG) & how are ...
How Do Vector Graphics Work?...
Use Scalable Vector Graphics in Your Presentation ...
Creating your first SVG!...
Difference Between Raster and Vector!...
SVGs (Scalable Vector Graphics) - HTML Tutorial (P...
The best FREE SVG Box Design Generator?...
A beginners guide to SVG | Part One: The Why, What...
How to create scalable vector graphics ( svg ) fil...
75. Scalable Vector Graphics | SVG | Code with Mos...
Scalable Vector Graphics (SVG) Tutorial - Learn Ho...
