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

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’ <? <?

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

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.

SVG Viewport and View Box The viewport and view box of an SVG image set the dimensions of the visible part of the image. The Viewport The viewport is the visible area of the SVG image. An SVG image can logically be as wide and high as you want, but only a certain part of the image can be visible at a time. The area that is visible is called the viewport. You specify the size of the viewport using the width and height attributes of the <svg> element. This examples defines a viewport that is 500 units wide and 300 units high. Coordinate System Units If you do not specify any units inside the width and height attributes, the units are assumed to be pixels. If you prefer to use different units than pixels, you can. The units you set on the <svg> element only affects the size of the <svg> element (the viewport). Here is an example that shows an <svg> element with one set of units, containing shapes with their own units set: The <svg> image has its units set in cm. Here is the resulting image. The View Box xMaxYMax xMidYMid

Related: