Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools Introduction to Front End Performance Optimization Combine and Minify Assets Create a Sprite Map

Carl Sergile
Carl Sergile
16,570 Points
Posted by Carl Sergile
Carl Sergile
16,570 Points

Couple questions about SVGS

First and for most, this is more complicated than it looks but I guess I'll get it.

So my question(s) are: When setting up svgs why/where do you get this:

  1. http://www.w3.org/2000/svg
  2. What determines viewport size
  3. The path.

Where does all this info come when you convert it into an svg? or do you have to figure this out thru some other process. I get how you set it up or I can go back to this video and figure it out but where does all this info come from? Info fairies?....lol..jk

1 Answer

Sean McIntosh
Sean McIntosh
18,966 Points
Sean McIntosh
Sean McIntosh
18,966 Points

Hi Carl,

I think I can answer this question for you here goes...

  1. An .svg is a scalable vector graphic file.

Why? They are not size restricted like .jpg or bitmap images. They are very useful when developing applications and websites as they can grow or shrink in scale depending on the screen/device they are being used on.

Where? You can create and export .svg files in apps like adobe illustrator and sketch

  1. The viewport is the visible area of a webpage

Why? Screens sizes have been very diverse for quite some time now with the invention of smart phones and tablets, tv browsers and large monitors. Being able to set the viewport is handy because it enables content to adjust to the width of any device.

This prevents unnecessary side scrolling and makes a better user experience.

Handy because we can't guess every device the sites we create will be viewed on.

Where?

You can enter the following code in the head section of your website to display your website relative to the screen width of any device.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

More here: http://www.w3schools.com/css/css_rwd_viewport.asp

  1. The path is a line generated between two points

If you can imagine a dot to dot activity book, the path would be the line you draw to connect the dots.

Why?

Paths are calculated and scalable not static like bitmap images. This is how .svg files are created. They are handy because you can enlarge or shrink these images as much as you like without losing quality

Where?

You can create vector images that use paths in adobe illustrator, sketch, Inkscape and other vector applications.

Hope this helps...

Note: you may want to also take a look at media queries. They will enable you to display content as you like at specific screen widths..,

Here: http://cssmediaqueries.com/

Finally

You can use vector software like: illustrator, sketch, ink scape etc... To create .svg files.

All of the paths, colours, points etc... Are housed in the .svg file you can use a text editor to look inside an .svg file.

And the device/screen the user is viewing the website on will determine the viewport size