Тёмный

How To Use SVG Files On Your Website (For Beginners) 

iEatWebsites
Подписаться 46 тыс.
Просмотров 68 тыс.
50% 1

In this video you will learn about SVG (Scalable Vector Graphics). Using SVG files on your website will not only improve your page load speed but it will look a lot better.
Learn about the path (commands and coordinates): developer.mozilla.org/en-US/d...
SVG Complex animations: davidwalsh.name/gsap-svg-resp...
Music by: Nicolai Heidlas Music - Chase Your Dreams
/ nicolai-heidlas

Опубликовано:

 

28 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 75   
@bibakomk
@bibakomk Год назад
love your videos you're delivery is so articulate and easy to understand and your content is always awesome thanks for making them!
@ieatwebsites
@ieatwebsites Год назад
Thank you so much!!
@nishant_thite
@nishant_thite 4 года назад
Powerful features explained with great simplicity 👏🏼👏🏼👏🏼
@ieatwebsites
@ieatwebsites 4 года назад
Thank you! 😊
@moca1992
@moca1992 4 года назад
Pretty cool! I did not know the difference between an SVG and PNG, now I know. Thanks.
@rubenbascu
@rubenbascu 3 года назад
I've been looking for this turorial like a manic. Thanks Sir.
@ieatwebsites
@ieatwebsites 3 года назад
You are very welcome! 😁
@johnartzi5693
@johnartzi5693 2 года назад
Thanks so much I was looking for this!
@SpencerTaylorOnline
@SpencerTaylorOnline 6 лет назад
Eyeopening and very helpful! Thank you.
@ieatwebsites
@ieatwebsites 6 лет назад
+Spencer Taylor You welcome!! 😊
@Norway1999
@Norway1999 6 лет назад
Nice tut :D Keep up the good work :D
@ieatwebsites
@ieatwebsites 6 лет назад
+Norway-_-1999 Thank you!! I will 😊
@charlesgerard5721
@charlesgerard5721 4 года назад
love the background music. Thanks for the video.
@ieatwebsites
@ieatwebsites 4 года назад
You welcome! 😊
@michela1537
@michela1537 2 года назад
Excellent features, rich content and cool 2 thumbs up !
@ieatwebsites
@ieatwebsites 2 года назад
Thank you!
@ksbalaji1287
@ksbalaji1287 4 года назад
Very useful, thanks dude!
@ieatwebsites
@ieatwebsites 4 года назад
You welcome!
@basikir
@basikir 5 лет назад
thank you from Greece!
@ieatwebsites
@ieatwebsites 5 лет назад
You welcome!
@alexkotusenko302
@alexkotusenko302 6 лет назад
THANKS! very helpful!
@ieatwebsites
@ieatwebsites 6 лет назад
You welcome!!
@muhammedbilal988
@muhammedbilal988 6 лет назад
thanks bro, this is super explanation, it is more help ful
@ieatwebsites
@ieatwebsites 6 лет назад
You welcome!
@vithilavidara4771
@vithilavidara4771 6 лет назад
It 8s awesome tute boss. Keep it up. Thanks again
@ieatwebsites
@ieatwebsites 6 лет назад
+vithila vidara Thank you so much!!
@osamaxz5720
@osamaxz5720 10 месяцев назад
that was helpful thanks ❤
@ieatwebsites
@ieatwebsites 10 месяцев назад
You welcome!
@lisadaydreaming
@lisadaydreaming 6 лет назад
this is a great video!
@ieatwebsites
@ieatwebsites 6 лет назад
+lisadaydreaming Thanks!! ✌️
@CristianMartini81
@CristianMartini81 6 лет назад
Great video! ;)
@ieatwebsites
@ieatwebsites 6 лет назад
+Cristian Martini Thank you!!!
@erayozaydin3636
@erayozaydin3636 3 года назад
very clear explanation thanks
@ieatwebsites
@ieatwebsites 3 года назад
Thank you! 😁 and you welcome
@manikandansaminathan3103
@manikandansaminathan3103 5 лет назад
awesome music in sound cloud
@swordali
@swordali 6 лет назад
Thank you dear J.
@md.mohiulislam6516
@md.mohiulislam6516 2 года назад
very good brother.
@ieatwebsites
@ieatwebsites 2 года назад
Thank you!
@kettni
@kettni 2 года назад
thanks a lot for the video! How can I see the CSS in the Chrome Browser separately like you are having in the video?
@SofianMW
@SofianMW 5 лет назад
awesome
@ieatwebsites
@ieatwebsites 5 лет назад
Thank you!
@matiny142
@matiny142 4 года назад
❤❤❤👌👌
@supasounds2023
@supasounds2023 Год назад
i want to have my website logo as a svg, but it is very long and i need it twice on all of my pages, what should i do so i only have to show the code once and then it refers back
@Dota2Perspective
@Dota2Perspective Год назад
Do I need to set my svg files to have a transparent background for a website?
@KalyanChakravarthiingarapu
@KalyanChakravarthiingarapu 3 года назад
could you please let me know, how to download that file, I mean svg is overlay of the default image file, I wanna get downloaded the file with effect of change...
@emperadoro
@emperadoro 4 года назад
Hey man, thanks for your video. I am wondering how to I upload an svg to a web, so I can have a link to use it for
@ieatwebsites
@ieatwebsites 4 года назад
Do you have a hosting account?
@AZAMKHAN-vl4lq
@AZAMKHAN-vl4lq 4 года назад
Can we download svg like jgp and png
@billabong272
@billabong272 6 лет назад
Hi. Im stuck with this project. i have an SVG file which contains layers of irregular 'path' shapes. I used Adobe illustrator to create shapes and place it in different layers same as you did. I want to fill it with different colors (e.g. black, grey, pink, etc..) But to set up the color which will be use to fill the shapes, I have buttons for different colors. So when I click the 'Black' Button and click a shape, it fills up color 'Black'. Same with other color buttons. After filling up the different shapes. I want to save the corresponding filled up shapes into the database by using AJAX to MYSQL Database. And when I want to load the SVG of the previous state I will just make a query to what shape will be filled with what color. Could you give me an insight how these will be done? Thanks.
@ieatwebsites
@ieatwebsites 6 лет назад
Maybe this can help you to get started: jsfiddle.net/P6t2B/
@graintocask1615
@graintocask1615 6 лет назад
That was epic! I'm totally copying you. How would I import my animation into wordpress. It creates a HTML file is there a 'simple' way of placing it on a site? Have you created a vid on that? Thanks!!
@ieatwebsites
@ieatwebsites 6 лет назад
Maybe this helps: css-tricks.com/snippets/wordpress/allow-svg-through-wordpress-media-uploader/ That way you can upload SVG images using WordPress same way you do with regular images. If you want animation, you need to add the inline code.
@graintocask1615
@graintocask1615 6 лет назад
Thank you so much!
@PumpiPie
@PumpiPie 6 лет назад
so photoshop svg isent the same as illustrator svg? Whan using photoshop i dont get the paths etc only image...
@PumpiPie
@PumpiPie 6 лет назад
This is what i get wan exsporting the svg from photoshop... No path or style. Can i still animate it? If so how? I dont get it working :/ please help
@ieatwebsites
@ieatwebsites 6 лет назад
Is not the same. Photoshop is exporting an image inside the SVG. Try to use Vector based apps like illustrator.
@PumpiPie
@PumpiPie 6 лет назад
ohh :/ Is their a way to easy copy the design, maby like using something simulare to the magix tool in photoshop to recreate it on illustrater?
@ieatwebsites
@ieatwebsites 6 лет назад
There's an app called Vector Magic. Maybe that helps.
@PumpiPie
@PumpiPie 6 лет назад
I did figure it out :D
@desuke_8124
@desuke_8124 3 года назад
How to convert an Gif in an Svg for a Website?
@Dude732Gaming
@Dude732Gaming 3 года назад
How to compress svg file size to 10kb
@ieatwebsites
@ieatwebsites 3 года назад
Search for “SVG Optimizer”
@Dude732Gaming
@Dude732Gaming 3 года назад
@@ieatwebsites okay
@CrowleyBlack2
@CrowleyBlack2 4 года назад
J
@ChumaNd
@ChumaNd 4 года назад
You are just too much my man. i love your stuff and you but has got 2 questions for you. 01. how can i save an svg from a website down to my systems 02. how / where may i learn creation of such diagrams like you already have up there (human eye and spec} once more i repeat that you are too much
@ieatwebsites
@ieatwebsites 4 года назад
Thank you! If the SVG is inline code, you can copy that code a us free online apps line SVG OPTIMIZER to save the SVG to your computer or paste the code to your text editor and save as SVG. You can create designs like this using Adobe Illustrator or similar apps, there are a bunch of tutorials on RU-vid.
@prachiverma1356
@prachiverma1356 4 года назад
not that bad ???
@ieatwebsites
@ieatwebsites 4 года назад
What is not that bad? 😁
@prachiverma1356
@prachiverma1356 4 года назад
@@ieatwebsites sorry
@prachiverma1356
@prachiverma1356 4 года назад
@@ieatwebsites nothing
@bambinoesu
@bambinoesu 3 года назад
made no sense
@ieatwebsites
@ieatwebsites 3 года назад
Why not
Далее
SVG Viewport and viewBox (For Complete Beginners)
12:25
Olive can see you 😱
01:00
Просмотров 18 млн
Design & Animate SVG Illustrations for Web Design
34:39
Front End Center - Why Inline SVG is Best SVG
16:15
Просмотров 136 тыс.
HTML 5 Tutorials #18 - Using SVG
7:38
Просмотров 190 тыс.
Bootstrap in Dreamweaver for beginners (Part 1)
32:03
How to Code SVG Patterns (Part 1)
10:56
Просмотров 5 тыс.
SVG can do that?! (Sarah Drasner)
38:08
Просмотров 83 тыс.
Learn Webflow in 16 Minutes (Crash Course)
16:04
Просмотров 1,1 млн