SVG vs. JPG vs. PNG
Daniel Walter Scott
Lessons
How This Class is Structured
01:41 2What to Download
02:57 3Creating Our First Webpage
05:55 4What is HTML5 & CSS3
08:24 5Head vs. Body vs. Html Tag
09:01 6Title & Description
05:54What Code Editor Should I Use
02:42 8Using Diy Tags
06:26 9What is a CSS Class
09:05 10How to Create Nested Divs
05:03 11Class Project
05:24 12External CSS
09:07 13Creating Our Index Style Pages
12:16 14Testing Your Website
08:47 15Check Your Code For Errors
11:01 16What are HTML5 Structure Tags
05:47 17Add HTML5 structure elements
16:02 18How to Set the Color of the Background
05:10 19Adding Images to a Website
04:38 20How to Center an Image
01:14 21Change the Font Size & Color
14:11 22Make a Clickable Link
08:45 23Stretching Background Image
05:38 24Making a Div Tag Transparent
02:36 25Simple Website Text Navigation
06:43 26CSS Compound Classes
07:02 27Class Project 02
02:05 28Class Project 02 - COMPLETE
04:48 29Add an Email Button to a Website
03:49 30Add Google Maps to Your Website
11:25 31Making a Website Live
16:50 32Uploading via SFTP
11:50 33Setting Up Our New Project
03:46 34CSS Reset
15:22 35Min-height vs. Height
07:01 36Div Tags Onto One Line
05:23 37Getting div tags onto one line using Flexbox in HTML & CSS
05:23 38Evenly Spaced Div Tags
04:42 39Two Div Tags of Different Sizes
07:13 40Vertically Center Content
07:20 41Class Project 3
02:51 42Class Project 3 - COMPLETE
05:39 43Change Default Fonts
04:19 44Installing Google Fonts
12:44 45What are PX & EM & REM
14:56 46Change Line Height
04:33 47SVG vs. JPG vs. PNG
07:04 48How to Create a SVG, JPG, or PNG
11:00 49Block Images vs. Background Images
08:32 50Finishing Up Our Cards
09:10 51Icons via Font Awesome
16:31 52Making a Div Container Clickable
09:55 53Box-sizing & Border-box
06:19 54How to Make A Colored Button
07:46 55Why Can't I Add Margin or Paddding
11:08 56Rounded Corners
04:17 57Drop Shadows
06:24 58Backup Your Website
05:00 59Reusing a Button Class
03:10 60Class Project 04
02:58 61Class Project 04 -COMPLETE
05:45 62Adding a Horizontal Rule
03:51 63Make Divs Wrap Onto Separate Lines
12:14 64Hover Color & Animating a Button
03:33 65Pseudo Classes
09:31 66Simple Dropdown Navigation
20:04 67Adding Our Dropdown to the Website
14:50 68Useful Shortcuts and Tips in VS Code
13:28 69Large Background Image
09:24 70How to Connect 2 Pages
10:42 71Simple PHP Form Work
17:49 72Placeholder Form Text
05:46 73Multi Line Form Text Box
02:18 74Form Check Marks
03:04 75Form Radio Button
06:07 76Form Drop Down Menu
05:48 77How to Style Your Form
12:55 78What does responsive website design mean
04:17 79How to change a website layout size color when at different sizes using media queries
11:28 80How to test your website on a tablet or mobile phone from Visual Studio Code
06:00 81How to change the layout of a responsive website for mobile vs desktop
16:02 82How to turn things on and off for mobile tablet & desktop responsive websites
06:03 83What is pixel density responsive images pixel ratio dp px in webdesign
14:47 84How to export responsive images for website from XD Photoshop Illustrator
05:11 85How to add responsive images to website using 100% width in HTML & CSS
06:08 86How to use srcset to change images in HTML for responsive website
10:15 87How to add a css style to the first line of a p tag on a website (
11:18 88How to make the header footer full width but the inside centered
05:36 89Class Project 05 – Header design
03:12 90Class Project 05 – Header design COMPLETE
06:25 91How to use a span tag or span class in HTML to change text
10:32 92How to pin the navigation to the top of a website fixed nav
03:17 93How to make a simple responsive mobile menu using CSS only
08:21 94What is Javascript vs Jquery in website web design
06:35 95How to make a burger menu 3 line mobile navigation for a website
15:11 96How to switch a menu nav from desktop to mobile phone
21:45 97Overview of what Bootstrap 4 is in website design
07:57 98How to install Bootstrap 4 on a website using Visual Studio Code
06:27 99Quick overview of how the Bootstrap Grid Layout works in VS Code
10:49 100Quick overview of how Bootstrap Components works in VS Code
09:23 101Quick overview of how Bootstrap CSS Styles works in VS Code
08:20 102How to customize the default Bootstrap 4 css styles
13:51 103How to use Bootstrap Layout Grid Experiment 1
10:20 104How to make 100% header & uneven widths in Bootstrap 4
07:16 105How to create uneven col widths in Bootstrap 4
07:27 106How to add padding & margins using Bootstrap 4 in VS Code
12:03 107How to change layout of Bootstrap depending on mobile or desktop
15:46 108How to turn things on & off on your website using Bootstrap 4
05:30 109Google Chrome Inspect
12:40 110Add Shadows to Text & Boxes
07:06 111Change the Default Buttons
06:16 112Responsive Images in Bootstrap 4
09:34 113How to Center Text & Div Tags
04:16 114Customize the Bootstrap Navbar
07:29 115Add Your Own Logo
03:58 116Change the Default Nav Styles
12:12 117Fix the Navigation to the Top
04:41 118Col Images & Col Background
07:56 119Bootstrap Border & Rounded Corners
04:20 120Bootstrap 4 Carousels
05:13 121Card Groups
03:29 122Drop Shadows On Bootstrap Cards
02:25 123Clickable Boxes in Bootstrap 4
04:02 124Final Quiz
Lesson Info
SVG vs. JPG vs. PNG
Hey there, this video is going to be talking about the differences between jpeg PNG s and S V G s will even mention gifts at the end if you know all of that, you can skip on, we're not going to actually do anything in this class. A lot of me talking and explaining, but if you've maybe never heard of an svg scalable vector graphics hang out because this one is awesome. I'll show you an example. See blurry PNG, really nice SVg and scales forever. Watch, keep scaling in, look how good he is. Alright, let's jump in and figure all this out. All right, let's talk about the main image types. Okay, so jpeg PNG and Svg. So jpeg and PNG have been around for awhile, jay pig is probably the most common. So jPG, jpeg, whatever you want to call it. It is amazing for images like this hiding photographs do really well as J pigs. Why? Because the file size is very small in relation to the quality that you can get from it. Okay, so you can get something that looks really good loads of colors. Okay, ther...
e's millions of colors in the J Peg but the file size in comparison is very, very small. So we use that. Where did jpeg stop? And you're like, okay, well we'll just use jpeg for everything. The big trouble with J pigs is that there's no transparency, you can't see through a JP, there's no way of having a hole in it to show things through and that's where PNG starts. Okay, now we'll look at our logo that we did. Okay, so this logo here, you see our raw raw bikes, it's actually an image. Okay, can you kind of see when I drag it around it actually is see through, so I can change the color behind it and the color changes there. If this is a Jpeg, pick a color for the background and that would be it forever. So PNG is awesome. They have loads of colors as well. You can use millions of colors and a PNG but it also has transparency and you might be saying, why don't we just use those? Because the file sizes are huge for PNG in comparison to a jpeg. So you've got to do a trade off. Do I need transparency? Cool. If you do then you have to leave behind if you don't like this image here, definitely a Jpeg because there's no transparency. So I might as well have all the goodness of the colors with the low file size. Now, the third option, the SVG is quite new. So if you haven't heard of this, it's a scalable vector graphic. Okay, And victor is the cool bit. So if you know about vector graphics, you're going to go really, you can do victor online. It's like you totally can. If you've never heard of vector before, you might search the term, it's victor. Okay, V E c T o R because we won't cover it too much in here, but the benefit of it. Okay, As long as it's a really simple shape, like an icon or logo, SVG would be terrible for this even if you wanted transparency, it would be terrible because there's just so much detail. But for simple shapes, SVG are brilliant. So logos here, we're going to switch this out for an SVG and look at the perks. So let's switch it out first and see the difference and then we'll explain the perks for an SVG. So in your graphics, Okay, sorry, in your graphics in your exercise files, so if you go to exercise files, project two, there was a lion PNG that we used earlier on. We're going to use this one called SVG copy it, go to your desktop, put it in your project to folder in your images and paste it in now in your code. Okay. Go to visual studio code here under your image tag in your logo. Div Okay, switch out PNG for SVG. Okay, let's have a little look at the difference. So this is the original one and get ready. Look at the second one ready, crisping clear. Okay, so if you're working you're obviously watching this video and sometimes the quote depending on your internet. Um sometimes people write comments on the bottom like it looks the same. Um you might be looking at a really low resolution of the video. Often if you check in the bottom right of your video you can like raise or lower the quality of the video that you're watching Okay. Just so that you can see these details but let's make it a bit more obvious so I can zoom in. So if I zoom in on this one, I'm holding command plus heading out a couple of times. That's on a Mac control plus on a pc just zooming into my website so that you can kind of see the real big difference. Okay, so PNG uses pixels to make its graphic and while it was really small it was fine. Okay, had a slightly blurry edge but victor. Okay, this SVG it scales to infinity. Okay, you can scale it as big as you like and the cool thing about it is that it will always be crisp and clear on the outside and still have a very small file size. You could get a PNG looking really good at this size. Okay. You can make it bigger and make it great but the file size is going to get really, really big so you'll find lots of websites now using SVG. S browser compatibility is really good now so if it's an icon or a logo using SVG, that's a good kind of blanket rule if it's a an image. Okay, I'll show you a good example. So this one here. Okay, this is a graphic I made for a later part of the class and let's say I wanted to look exactly like this. Okay, my giant weird meat yogurt that I made for you guys, but it's got a background color. This would work best as a Jpeg will do, I'll show you how to export all these in a second, but let's understand them first. So this would be great as a Jpeg because it's got lots of colors in here and you know, it's reasonably photographic and the file size will be nice and small. But let's say I needed to have empty background, this little checkerboard things, computers way of saying that there's nothing behind it. Okay, so this would have to be a PNG. Okay, why wouldn't it be an SVG? And SVG needs that really simple details. If this was an SVG, it just file size would be huge and it would look terrible and it just wouldn't work. I can't make this an SVG and SVG perfect for this type of thing. When there is like a really simple lines, it's anything done in illustrator can be exported as an SVG because that's really basic basic shapes, simple colors, easy Jpeg for images. PNG images that need transparency and anything that is really simple lines like icons and small little graphics arrows, that sort of thing would be perfect for an SVG. Like here's I mentioned gifts, gifts. The only reason you use gifts these days, if you need to animate them. Okay, gifts have a real big drawback as in the, they only have 256 colors, which is a pain. Okay, So you only can do small things and the colors can't be too broad and just there's no reason to use it unless you want to animate it. And even then animating gIFs, a really niche kind of use case you can animate in CSS and lots of other, better ways. So I'm not going to cover gifts here. I do cover a lot more in my other safe Photoshop and illustrator classes. We make all sorts of animated gIFs there, but we're not going to use a kind of traditional web design now. Alright, what I'll do is now you understand this stuff, I might actually shift the next part of this video to another video so that you can just watch that nice and by itself. So later on you can come back and just show you how to kind of export these S V G S P N G s and J pigs easily. Yeah. So let's do that in the next video
Class Materials
Ratings and Reviews
Viwosoft Technologies
Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!
Student Work
Related Classes
Branding