SVG Files: From Illustrator to the Web

SVG Files: From Illustrator to the Web

Channel:
Envato Tuts+
Subscribers:
1,630,000
Published on ● Video Link: https://www.youtube.com/watch?v=ONp83wuenzQ


Category:
Tutorial
Duration: 4:39
16,921 views
174

In this quick how-to video, we'll explore vector SVG files. You'll learn how to create them in Adobe Illustrator, their use on the web, and how to use them with Cricut. ► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_ONp83wuenzQ&utm_medium=referral&utm_source=youtube.com&utm_content=description

Scalable Vector Graphics (SVG) is a vector image format which began life back in 1998. It was always developed with the web in mind, but only now has the web actually started to catch up. There’s no denying its relevance today, so let’s have a look at the basics of taking SVG from Illustrator to the web browser.

Here's what you'll learn:

00:34 - SVG Explanation
01:02 - Start Illustrator
01:18 - Create a Graphic
01:54 - Save Settings
02:21 - Opening an SVG File in the Browser
02:48 - Import an SVG to Cricut
03:06 - Advanced Illustrator Settings

Assets Used in This Video:
• Background Music: https://elements.envato.com/ambient-music-PTM6NQ6a?utm_campaign=yt_tutsplus_ONp83wuenzQ&utm_medium=referral&utm_source=youtube.com&utm_content=description
• Ambient Background: https://elements.envato.com/3d-background-V25FU79?utm_campaign=yt_tutsplus_ONp83wuenzQ&utm_medium=referral&utm_source=youtube.com&utm_content=description
• Example Logo: https://elements.envato.com/dragon-logo-YTSMCF9?utm_campaign=yt_tutsplus_ONp83wuenzQ&utm_medium=referral&utm_source=youtube.com&utm_content=description
• Example Web Graphic: https://elements.envato.com/freelance-8JVGH7?utm_campaign=yt_tutsplus_ONp83wuenzQ&utm_medium=referral&utm_source=youtube.com&utm_content=description

Read more on SVG Files: From Illustrator to the Web on Envato Tuts+: https://design.tutsplus.com/tutorials/svg-files-from-illustrator-to-the-web--vector-20899?utm_campaign=yt_tutsplus_ONp83wuenzQ&utm_medium=referral&utm_source=youtube.com&utm_content=description

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_ONp83wuenzQ&utm_medium=referral&utm_source=youtube.com&utm_content=description

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_ONp83wuenzQ&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -



Other Videos By Envato Tuts+


2021-04-07How to Make a Logo Look Vintage in Photoshop
2021-04-0510 Top Apple Keynote Presentation Themes
2021-04-05Create an "Ashes & Embers" Dispersion Effect in Photoshop
2021-04-02How to Make, Use, and Manipulate a Calligraphic Brush in Adobe Illustrator
2021-04-01How to Make Facial Hair in Photoshop
2021-03-31Create a Gold Foil Logo Mockup in Photoshop
2021-03-29How to Handle Text Overflow (With a CSS Ellipsis)
2021-03-29Create a Wood Engraved Logo Mockup in Photoshop | Photoshop Tutorial
2021-03-28How to Add or Edit a Sidebar in WordPress
2021-03-27How to Build a Reading Progress Bar With CSS and JavaScript
2021-03-26SVG Files: From Illustrator to the Web
2021-03-25Make Awesome Page Layout Designs in Microsoft Word
2021-03-23A to Z of Adobe Illustrator Tips, Tricks, and Hacks!
2021-03-22How to Write a Resume in 7 Steps
2021-03-22How to Create a Cloud Effect in Photoshop
2021-03-21Create an Elementor Coming Soon Template for WordPress
2021-03-19How to Create Vector Glitches Using Adobe Illustrator
2021-03-187 Useful Gmail Tips and Tricks
2021-03-187 Excelentes Trucos de Gmail
2021-03-17How to Animate in After Effects | FREE COURSE
2021-03-17How to Apply Texture to Text in Photoshop | Photoshop Tutorial


Tags:
svg
adobe illustrator
illustrator
scalable vector graphics
svg tutorial
web design
graphic design
how to make svg files for cricut
vector
how to make svg files for cricut in illustrator
how to make svg files
Envato
Tuts+
Envato Tuts+
cricut svg
svg files for cricut
illustrator svg tutorial
what is an svg file
how to create svg files
svg illustrator
web svg
illustrator export svg
svg vector file
adobe illustrator svg
make svg in illustrator