No video

Finally Figure out the SVG ViewBox - Tutorial + ViewBox Tools

  Рет қаралды 49,329

DesignCourse

DesignCourse

Күн бұрын

Пікірлер: 51
@DesignCourse
@DesignCourse 4 жыл бұрын
@1:25 I show a couple screen grabs from my upcoming retrowave music video where an early 80's coder uses JAVASCRIPT 0.1 to time travel to the year 2020! 😂 Check 'er out! More to come... Get me to 500k subs to reveal the video by subbing up!
@brawndo8726
@brawndo8726 4 жыл бұрын
One time it took me 4 days to learn the 'B' in viewBox is capitalized...
@jadenmazzone3451
@jadenmazzone3451 Жыл бұрын
"If there is any width and height attributes applied to the svg element I remove those, because it makes it 100% width and height of the browser". Thank you!
@jessicalewisjessielew3399
@jessicalewisjessielew3399 3 жыл бұрын
The tutorial starts @2:20
@anhtungle1554
@anhtungle1554 2 жыл бұрын
this tool could have save me an hour ^^^
@Trazynn
@Trazynn 4 жыл бұрын
This is what I was looking for. SVG is so powerful yet so counterintuitive. One major stumbling block for me was that I couldn't get over how you had to paste these reams of svg code straight into your html file. That just couldnt' be right. Looked for ways around it but nope, you actually have to pasted forty pages worth of gibberish into the the file if you want to be able to control specific parts of it.
@henriquesenadev2194
@henriquesenadev2194 Жыл бұрын
great video!
@gilsonconceicao5201
@gilsonconceicao5201 24 күн бұрын
Thanks for share. I finally understood. Do you have some content on how to styling svg-colors using css? I'm struggle with it.
@Sohrabziagoogle
@Sohrabziagoogle 4 жыл бұрын
Somebody is getting in shape 👍🏻
@Rafael-Bravo
@Rafael-Bravo 3 жыл бұрын
Not my SVGs 🥺
@kunlayamutanen5786
@kunlayamutanen5786 4 жыл бұрын
Thank you so much for posting this and also thanks o lots for the viewbox generator! You just got rid of my headache! By the way, I am one of your FC! : )
@JWry-RazonandoBiblicamente
@JWry-RazonandoBiblicamente 3 жыл бұрын
This is a very practical explanation of the viewbox. Thank you!
@DrewNorman
@DrewNorman 4 жыл бұрын
You are amazing this really helped me with a task on my plate to fix some whacky svgs on our website.
@grigorfanyan1821
@grigorfanyan1821 3 жыл бұрын
Thanks man, this makes a lot of sense
@robinhodson9890
@robinhodson9890 2 жыл бұрын
You need to make sure that the contents area of your SVG design, is the same as the invisible bounding box. You can try this manually, or let Inkscape do it for you. After that hidden variable is out of the way, things will run a lot saner.
@luckybairagi7294
@luckybairagi7294 2 жыл бұрын
thanks for the tool!!!
@Franiveliuselmago
@Franiveliuselmago 4 жыл бұрын
I think a video showing the different ways of inserting an SVG file into the html would be cool. Because using it with the img tag, for example, doesn't allow the color css property to work.
@ahmedmaher1482
@ahmedmaher1482 4 жыл бұрын
Syntax.fm did a podcast with Sarah soueidan about it and it's very useful check it out
@Franiveliuselmago
@Franiveliuselmago 4 жыл бұрын
@Generation Z Gamer I'll look for it then
@JohnStrandt
@JohnStrandt 2 жыл бұрын
yeah I whipped this up in like 10 min cuz i'm a chad, and I'm not exaggerating at all. total chad
@winstonmisha
@winstonmisha 3 жыл бұрын
To anyone who still struggles to understand this, try looking up the "preserveAspectRatio" improve your understanding even more
@KeithFeickert
@KeithFeickert 2 ай бұрын
Tutorial link broken, tool doesn't appear to work.... I guess too many years have passed and things have broken over time :(
@adskfksefn
@adskfksefn 4 жыл бұрын
hi Gary! u are best!
@simohameds.567
@simohameds.567 2 жыл бұрын
شكراً 💯
@MrAndi1281
@MrAndi1281 4 жыл бұрын
Great Tool, thanks Gary!
@mariananelson9212
@mariananelson9212 2 жыл бұрын
why can't I just enter the numbers???? Like that slider is so delayed.
@iUmerFarooq
@iUmerFarooq 4 жыл бұрын
How did you make your intro, can you teach us?
@MrAndi1281
@MrAndi1281 4 жыл бұрын
Interested in this as well
@mytube5182
@mytube5182 4 жыл бұрын
Wonderfull keep do more videos. thank you
@TomHermans
@TomHermans 4 жыл бұрын
This is great. And when I saw the KZfaq notification I already knew where the inspiration came from 😉
@HCforLife1
@HCforLife1 4 жыл бұрын
Amazing stuff as always. Thank you!
@andrew.schaeffer4032
@andrew.schaeffer4032 2 жыл бұрын
wow great video, thanks - and btw - how'd you get so good at coding? Any resources you could point me to?
@avneet12284
@avneet12284 4 жыл бұрын
So cool 😎👌
@MrNobodyX3
@MrNobodyX3 2 жыл бұрын
okay but is there a way to scale it on one direction?
@ryandavis7463
@ryandavis7463 3 жыл бұрын
You could at least name the talented lady who created the content you are using to get subscribers and ad time. Her name is Amelia Wattenberger, you can follow her on Twitter and she also has a podcast
@msvmanikantasrivishnu7788
@msvmanikantasrivishnu7788 4 жыл бұрын
Nice 💛
@NyuRubesh
@NyuRubesh 4 жыл бұрын
Good video...
@johanstam3602
@johanstam3602 2 жыл бұрын
Beginner question. How to get the size (kb) reduced? Some svg's are really too big for webdesign.
@robinhodson9890
@robinhodson9890 2 жыл бұрын
Tweak your design to optimise it. There are file conpactifiers which can help too.
@IAMZAMEK
@IAMZAMEK 4 жыл бұрын
How to position absolute SVG on RWD? Alsp how to draw SVG on scroll from top to bottom?
@deps..
@deps.. 4 жыл бұрын
I'm pretty sure you can just set it to absolute with CSS like u normally do to any other element.
@Dexmente
@Dexmente 4 жыл бұрын
@@deps.. As an aside, keep in mind that if you include it with the tag, you'll all css properties, so they show be embedded in the code.
@cdhit
@cdhit 2 жыл бұрын
can be a 2 minute video
@mac4666
@mac4666 4 жыл бұрын
Hey please create a tutorial on Django. Please please please......🙏🙏🙏🙏🙏
@abhishreymittal
@abhishreymittal 4 жыл бұрын
Cool...🤩🤩🤩
@omeralsoma_
@omeralsoma_ 4 жыл бұрын
Awesome You safe me man I wish you playing country
@DesignCourse
@DesignCourse 4 жыл бұрын
Not quite! 🤣
@123userthatsme
@123userthatsme 4 жыл бұрын
This is confusing af. I don't know why they didn't just do it top, left, width, height.
@gexgex941
@gexgex941 3 жыл бұрын
Sorry, i didn't understand how to make it responsive(
@NyuRubesh
@NyuRubesh 4 жыл бұрын
First for the First time
Understanding SVG viewBox and viewport
10:32
snorklTV
Рет қаралды 5 М.
SVG Viewport and viewBox (For Complete Beginners)
12:25
Envato Tuts+
Рет қаралды 27 М.
UNO!
00:18
БРУНО
Рет қаралды 5 МЛН
Interactive web animation with SVG (DevFest 2019)
38:19
Google Developer Groups
Рет қаралды 61 М.
Bad at Picking COLORS?  Let's fix that - RAPID Color Scheming
17:04
DesignCourse
Рет қаралды 363 М.
Complex SVG Animations Made Simple with JavaScript
22:04
DesignCourse
Рет қаралды 65 М.
svg viewBox attribute
2:54
Lydia Flynn
Рет қаралды 6 М.
The Magic of CSS Grid AUTO-FIT vs AUTO-FILL
11:25
DesignCourse
Рет қаралды 178 М.
Awesome Scrolling SVG Line Drawing - How they did it!
21:45
DesignCourse
Рет қаралды 257 М.
Front End Center - Why Inline SVG is Best SVG
16:15
Front End Center
Рет қаралды 137 М.
Hard and Soft 8 Point Grids
7:46
Christopher Deane
Рет қаралды 23 М.
Animating SVG with the Awesome GSAP 3.0
30:14
DesignCourse
Рет қаралды 96 М.