Finally Figure out the SVG ViewBox - Tutorial + ViewBox Tools

Поделиться
HTML-код
  • Опубликовано: 8 янв 2025

Комментарии • 50

  • @DesignCourse
    @DesignCourse  5 лет назад +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 года назад +28

    One time it took me 4 days to learn the 'B' in viewBox is capitalized...

  • @jadenmazzone3451
    @jadenmazzone3451 2 года назад +1

    "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!

  • @gilsonconceicao5201
    @gilsonconceicao5201 5 месяцев назад

    Thanks for share. I finally understood. Do you have some content on how to styling svg-colors using css? I'm struggle with it.

  • @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! : )

  • @jessicalewisjessielew3399
    @jessicalewisjessielew3399 3 года назад +5

    The tutorial starts @2:20

  • @JWry-RazonandoBiblicamente
    @JWry-RazonandoBiblicamente 3 года назад

    This is a very practical explanation of the viewbox. Thank you!

  • @Sohrabziagoogle
    @Sohrabziagoogle 5 лет назад +1

    Somebody is getting in shape 👍🏻

  • @Trazynn
    @Trazynn 4 года назад +1

    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.

  • @iUmerFarooq
    @iUmerFarooq 5 лет назад +2

    How did you make your intro, can you teach us?

  • @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.

  • @DrewNorman
    @DrewNorman 4 года назад

    You are amazing this really helped me with a task on my plate to fix some whacky svgs on our website.

  • @winstonmisha
    @winstonmisha 3 года назад

    To anyone who still struggles to understand this, try looking up the "preserveAspectRatio" improve your understanding even more

  • @anhtungle1554
    @anhtungle1554 2 года назад

    this tool could have save me an hour ^^^

  • @Franiveliuselmago
    @Franiveliuselmago 5 лет назад +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 5 лет назад

      Syntax.fm did a podcast with Sarah soueidan about it and it's very useful check it out

    • @Franiveliuselmago
      @Franiveliuselmago 5 лет назад

      @Generation Z Gamer I'll look for it then

  • @grigorfanyan1821
    @grigorfanyan1821 3 года назад

    Thanks man, this makes a lot of sense

  • @KeithFeickert
    @KeithFeickert 6 месяцев назад

    Tutorial link broken, tool doesn't appear to work.... I guess too many years have passed and things have broken over time :(

  • @MrNobodyX3
    @MrNobodyX3 3 года назад

    okay but is there a way to scale it on one direction?

  • @MrAndi1281
    @MrAndi1281 5 лет назад

    Great Tool, thanks Gary!

  • @henriquesenadev2194
    @henriquesenadev2194 Год назад

    great video!

  • @TomHermans
    @TomHermans 5 лет назад

    This is great. And when I saw the RUclips notification I already knew where the inspiration came from 😉

  • @johanstam3602
    @johanstam3602 3 года назад

    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.

  • @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

  • @IAMZAMEK
    @IAMZAMEK 5 лет назад +1

    How to position absolute SVG on RWD? Alsp how to draw SVG on scroll from top to bottom?

    • @deps..
      @deps.. 5 лет назад

      I'm pretty sure you can just set it to absolute with CSS like u normally do to any other element.

    • @Dexmente
      @Dexmente 5 лет назад

      @@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.

  • @adskfksefn
    @adskfksefn 5 лет назад +1

    hi Gary! u are best!

  • @luckybairagi7294
    @luckybairagi7294 3 года назад

    thanks for the tool!!!

  • @andrew.schaeffer4032
    @andrew.schaeffer4032 3 года назад

    wow great video, thanks - and btw - how'd you get so good at coding? Any resources you could point me to?

  • @HCforLife1
    @HCforLife1 5 лет назад +1

    Amazing stuff as always. Thank you!

  • @mariananelson9212
    @mariananelson9212 2 года назад

    why can't I just enter the numbers???? Like that slider is so delayed.

  • @simohameds.567
    @simohameds.567 3 года назад

    شكراً 💯

  • @mac4666
    @mac4666 5 лет назад +1

    Hey please create a tutorial on Django. Please please please......🙏🙏🙏🙏🙏

  • @ryandavis7463
    @ryandavis7463 4 года назад +6

    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

  • @Have_a_moment
    @Have_a_moment 4 года назад

    Wonderfull keep do more videos. thank you

  • @avneet12284
    @avneet12284 5 лет назад

    So cool 😎👌

  • @msvmanikantasrivishnu7788
    @msvmanikantasrivishnu7788 5 лет назад

    Nice 💛

  • @abhishreymittal
    @abhishreymittal 5 лет назад

    Cool...🤩🤩🤩

  • @123userthatsme
    @123userthatsme 4 года назад

    This is confusing af. I don't know why they didn't just do it top, left, width, height.

  • @NyuRubesh
    @NyuRubesh 5 лет назад

    Good video...

  • @gexgex941
    @gexgex941 4 года назад

    Sorry, i didn't understand how to make it responsive(

  • @cdhit
    @cdhit 2 года назад +1

    can be a 2 minute video

  • @omeralsoma_
    @omeralsoma_ 5 лет назад +2

    Awesome
    You safe me man
    I wish you playing country

  • @NyuRubesh
    @NyuRubesh 5 лет назад +1

    First for the First time