background preloader

SVG Icons FTW

SVG Icons FTW
Despite the growing popularity of SVG, its time around and excellent browser support, we have a lack of good vector icon approaches. It's time to fill this gap and use SVG as icons in our web projects. A lot of great methodologies and principles arose making our CSS more and more modular, structured and flexible. But fortunately we’ve had icon fonts coming to the rescue. It’s plain text, which means they can be gzipped to up to 95%It’s a vector graphic, which means it can be scaled to any size making it Retina readyIt’s one source file, which means a minimum of HTTP requestsIt’s a font – you can easily change size, color, shape and add a shadowBrowser support for older browsers possible (e.g. Unfortunately, icon fonts have some limitations like being monochrome (still) and we can only use styles for texts like e.g. a text shadow. So today we will explore the possibilities of using SVG icons instead. Using SVG icons Currently, SVG looks more like a retired super hero. Getting started Related:  Banque d'effet JSSVG Xchange

Applying App Design Concepts to Website Design Should we let app design guide us more in website design? In this article we'll explore how app design concepts can help rethink the planning and design of websites for a better user experience. If you ever look up best practices, design techniques, or trends in application design, you’ll notice something significant: there seems to be a much greater focus on what is most important, that being the user experience, usability, and functionality. We see this stressed every now and then for that in web design too, but how often is it done? Web design should not only be about making things look good, but also about good user experiences and a website’s goals. A Very Well Planned Out Layout If we’re talking about mobile apps or tablet apps, layout is extensively planned out ahead of time — usually to make efficient use of space. The same principle should apply to the Web right? I’m not against pattern libraries. Interactivity & User-Centric Design What makes an app, an app? Mobile First Conclusion

Snap.svg API Reference Creates a gradient element gradient string gradient descriptor Gradient Descriptor The gradient descriptor is an expression formatted as follows: <type>(<coords>)<colors>. The <type> can be either linear or radial. Examples Linear gradient, relative from top-left corner to bottom-right corner, from black through red to white: var g = paper.gradient("l(0, 0, 1, 1)#000-#f00-#fff"); Linear gradient, absolute from (0, 0) to (100, 100), from black through red at 25% to white: var g = paper.gradient("L(0, 0, 100, 100)#000-#f00:25-#fff"); Radial gradient, relative from the center of the element with radius half the width, from black to white: var g = paper.gradient("r(0.5, 0.5, 0.5)#000-#fff"); To apply the gradient:

Document Structure – SVG 1.1 (Second Edition) Contents 5.1 Defining an SVG document fragment: the ‘svg’ element 5.1.1 Overview An SVG document fragment consists of any number of SVG elements contained within an ‘svg’ element. An SVG document fragment can range from an empty fragment (i.e., no content inside of the ‘svg’ element), to a very simple SVG document fragment containing a single SVG graphics element such as a ‘rect’, to a complex, deeply nested collection of container elements and graphics elements. An SVG document fragment can stand by itself as a self-contained file or resource, in which case the SVG document fragment is an SVG document, or it can be embedded inline as a fragment within a parent XML document. The following example shows simple SVG content embedded inline as a fragment within a parent XML document. This example shows a slightly more complex (i.e., it contains multiple rectangles) stand-alone, self-contained SVG document: <? ‘svg’ elements can appear in the middle of SVG content. 5.1.2 The ‘svg’ element ‘svg’ <? <?

Techniques for Responsive Typography When it comes to responsive type on the web, there's more to do than just resizing the text's container and having the text reflow inside of it. This in-depth article covers various techniques for making text responsive. One of the most important aspects of responsive web design is responsive typography. When it comes to responsive type on the web, there’s more to do than just resizing the text’s container and having the text reflow inside of it. First Things First: Making text accessible Before getting into techniques to resize text on different screen sizes, you need to make sure that your text is legible and accessible by using sufficient color contrast and an easily readable font to avoid turning your page’s content into an eye sore. If text is not legible to begin with, then no matter how much you resize it, you’ll still end up with illegible text, which is of course the opposite of what you’re setting out to achieve in the first place. Choose A Readable Font Face Resources:

Structuring, Grouping, and Referencing in SVG – The <code><g></code>, <code><use></code>, <code><defs></code> and <code><symbol></code> Elements SVG comes with its own ways for structuring a document by means of certain SVG elements that allow us to define, group, and reference objects within the document. These elements make reusing elements easy, while maintaining clean and readable code. In this article we'll go over these elements, highlighting the difference between them and the advantages of each one. Grouping with the <g> element The 'g' in <g> stands for 'group'. The group element is used for logically grouping together sets of related graphical elements. The <g> element groups all of its descendants into one group. For example, the following is an SVG bird. If you wanted to move the entire bird from one place to another in Illustrator, you will also want to group the elements together so that you wouldn't have to select each and every one of them every time you wanted to do so. Grouping in SVG using the <g> element works the same way. Grouping elements is very useful, not just for organizational and structural purposes.

Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, <code>viewBox</code>, and <code>preserveAspectRatio</code> SVG elements aren't governed by a CSS box model like HTML elements are. This makes positioning and transforming these elements trickier and may seem—at first glance—less intuitive. However, once you understand how SVG coordinate systems and transformations work, manipulating SVGs becomes a lot easier and makes a lot more sense. In this article we're going to go over three of the most important SVG attributes that control SVG coordinate systems: viewport, viewBox, and preserveAspectRatio. This is the first in a series of three articles covering the topic of coordinate systems and transformations in SVG. For the sake of visualizing the concepts and explanations in the article even further, I created an interactive demo that allows you to play with the values of the viewBox and preserveAspectRatio attributes. Check the interactive demo out. The demo is the cherry on top of the cake, so do make sure you come back to read the article if you check it out before you do! The SVG Canvas The viewport

Elastic Stack: Elastic Dragging Interaction ElastiStack is a little script that let's you navigate through a stack of items by dragging away the first one. It comes with an elastic touch meaning that when dragging the top-most item, the other ones will follow as if they were connected elastically. When reaching a certain distance, the dragged item will release itself and the next item will pop out. View demo Download source Today we’d like to share a little script that lets you navigate through a stack of thumbnails with an elastic touch. Three items are visible initially, the main one and the the two next ones, which can be seen because we’ve added some perspective to the item list and translated the two items on the Z-axis. The HTML structure that we are working with is the following: When the first item gets dragged, we’ll want it to bounce back if it’s dropped too close to the stack. And this is how you can initialize the script: The beautiful illustrations used in the demo are by talented artist Guzk.

Animate SVG icons with CSS and Snap How to optimize SVG code and animate an SVG icon using CSS and Snap.svg library. Browser support ie Chrome Firefox Safari Opera 9+ Working with SVG files is not an option anymore. With a huge amount of high definition devices out there, it’s not sustainable to export different sizes of the same bitmap assets and target specific device resolutions through CSS media queries. Today’s resource is a very simple icon, that we imported as inline SVG into our index.html file. If you’re new to SVG, here are some great resources to start with: Creating the SVG The easiest way to create an SVG illustration is to use graphic editors such as Adobe Illustrator or Sketch. Take in mind, though, that the way you organize your layers in your graphic editor is gonna affect the code output. To make you an example: since our final icon is animated in 2 steps, I created 2 separate layers in Illustrator, one for the loading effect and one for the buildings. Optimizing SVG code Animating the SVG That’s it!

Text in SVG (Font, Anchor, Alignment) | apike.ca | Science, Technology, Programming and Anime This page deals with the typography attributes of text. The text tags are described on the linked page. SVG supports many of the more esoteric aspects of typography. Since the W3C is responsible for HTML, CSS and SVG, it is perhaps not surprising the level of sharing going on here. Font Styling The basic font attributes are quite similar in SVG and HTML. Commonly used values for font-family: Arial, Helvetica, sans-serifTahoma, Geneva, sans-serif'Times New Roman', serif Anchors and Alignment The anchor point is the x and y position defined by the text tag. The many options for the attribute alignment-baseline alter the positioning of the baseline with respect to the anchor point. Example 1. Combining 'middle' for both options is convenient for positioning text centered upon a spot regardless of size and length. Code 1. CSS/Attributes To style text using presentation attributes, use XML's attribute format (attribute="value"). The two 'text' tags are equivalent.

CSS Overlay Techniques There are several techniques for creating overlays: from using an absolutely positioned element to outlines and pseudo-elements. In this article we are going to explore each technique's styles with their pros and cons. Design patterns, a set of best practices and techniques that aim to solve some of the most common design “problems”, are usually presented in the context of design principles. We can decide intelligently when to keep the user on the page and model his process. Lightweight overlays can be used for asking questions, obtaining input, introducing features, indicating progress, giving instructions, or revealing information. When the user interaction is only accepted in the pop-up modal, a Lightbox effect is usually applied and the rest of the page is dimmed, indicating its inactivity. The aim of this tutorial is to introduce you to several techniques that can be used to create this dimmed overlay with CSS, and determine the pros and cons of each technique as we go over them.

Understanding SVG Coordinate Systems and Transformations (Part 2) — The <code>transform</code> Attribute SVG elements can be transformed by scaling, translating, skewing, and rotating—much like HTML elements can be transformed using CSS Transforms. However, there are certain inevitable differences when it comes to the coordinate systems used and affected by these transformations. In this article we'll go over the SVG transform attribute and CSS property, covering how to use it, and things you should know about SVG coordinate system transformations. This is the second article in a series I'm writing about SVG coordinate systems and transformations. In this part I'm going to assume you read the first one, so, if you haven't, make sure you do before you continue reading this article. The transform Attribute Values The transform attribute is used to specify one or more transformations on an element. The possible SVG transformations are: rotation, scaling, translation, and skewing. Note that the function syntax defined below only works in the transform attribute. Matrix Translation Scaling Skew

Related: