Everything you wanted to know about SVG | |
|---|
|
|---|
 Hi !
Designers and developers need their work on an ever growing number of screens with multiple pixel densities. The old solution was to have multiple versions of rasterized images, but this led to all sorts of headaches, not to mention file size bloat. SVG’s, or Scalable Vector Graphics, are one of the best options for images in responsive design and it’s no surprise why. They are scalable, resolution independent, can have small file sizes, and are widely supported by most browsers. But they can be tricky make fully responsive and require some HTML, CSS and even Javascript knowledge to use them effectively.
The links below will help you learn how to best use and optimize SVG’s so you can create stunning websites that look great on any screen! N00bs WelcomeThursday, Sept 29th - 6pm Are you still trying to wrap your head around what exactly a "framework" is? Do you dabble with HTML but want to learn more? Did you try your hand at web dev years
ago but feel completely lost now? If any of this sounds familiar, you aren't alone, and we've crafted a special meetup just for you. On September 29th, bring your laptop to ZURB HQ and join us for pizza, beer and some web dev talks aimed at beginners. We’ll walk you through the basics of web design and development, no prior experience necessary. Get details and RSVP here: | |
|---|
| |
|---|
|
|---|
| SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know. Read more → |
|---|
|
|---|
| In this snippet, we're going to look at the lesser known vector effect SVG attribute that helps us scale SVGs without scaling their strokes. Read more → |
|---|
|
|---|
| SVG's have responsive properties that go beyond vector scaling, such as control over aspect ratio, embedded CSS and a unique co-ordinate system. Let’s take some things you can do with SVG that you might not have seen, and perhaps not even considered possible. Read more → |
|---|
|
|---|
| An article on how to make embedded SVGs cross-browser responsive. We're going to cover embedding techniques, how to apply the "Padding Hack" and how to use inline media queries to make SVGs adaptive. Read more → |
|---|
|
|---|
| This introductory reading list is just that: it explains the basics of using vector graphics in practical, everyday front end development, without delving too deeply into markup; I’ll be exploring those details in future articles. Read more → |
|---|
|
|---|
| An exploration into scalable logos for the modern web. Read more → |
|---|
|
|---|
| CSS can be used to style and animate scalable vector graphics, much like it is used to style and animate HTML elements. In this article, I’ll go over the prerequisites and techniques for working with CSS in SVG. Read more → |
|---|
|
|---|
| Today we are going to continue our discussion on Scalable Vector Graphic (SVG), and as we have pointed out in our previous post, one of the advantages of using SVG is that it can be styled with CSS. Read more → |
|---|
|
|---|
| Scalable Vector Graphics (SVG), which are now supported by all modern browsers. Addy Osmani rounds up 20 excellent uses of SVG in the wild. Read more → |
|---|
|
|---|
| What if we want to re-arrange our logo elements depending on the aspect ratio of the asset, perhaps to account for the amount of vertical real estate available to us? Read more → |
|---|
|
|---|
And that’s a wrap for this month! Hopefully there are a few techniques in this email that you can pull into your projects to elevate your work. If all this web development stuff is new to you or you want a jump start building
amazing responsive sites with Foundation, check out our upcoming
Intro to Foundation 6 Webinar course. | |
|---|
|
|---|
Learn from the Foundation TeamTuesday, Oct 11th Each month, the designers and developers on the Foundation team take a break from working on the framework to share their insights through our online classes. Our next Intro to Foundation course is on October 11th, and will help you get up and running with the framework fast. You’ll also learn tips and tricks directly from the team that you can’t get anywhere else. If you’re ready to get serious about leveling up your skills, reserve your seat today: | |
|---|
|
|
