Using SVG 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. Why use SVG at all? Small file sizes that compress wellScales to any size without losing clarity (except very tiny)Looks great on retina displaysDesign control like interactivity and filters Getting some SVG to work with Design something in Adobe Illustrator. Notice the artboard is cropped up right against the edges of the design. You can save the file directly from Adobe Illustrator as an SVG file. As you save it, you’ll get another dialog for SVG Options. The interesting part here is that you can either press OK and save the file, or press “SVG Code…” and it will open TextEdit (on a Mac anyway) with the SVG code in it. Both can be useful. Using SVG as an <img> If I save the SVG to a file, I can use it directly in an <img> tag. In Illustrator, our artboard was 612px ✕ 502px. <!
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’ <? <?
Adaptive Images in HTML 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
Adaptive Images for Responsive Designs So you’ve been building some responsive designs and you’ve been working through your checklist of things to do: You started with the content and designed around it, with mobile in mind first. You’ve gone liquid and there’s nary a px value in sight; % is your weapon of choice now. You’ve baked in a few media queries to adapt your layout and tweak your design at different window widths. You’ve made your images scale to the container width using the fluid Image technique. You’ve even done the same for your videos using a nifty bit of JavaScript. You’ve done a good job so pat yourself on the back. HTML has an <img> problem CSS is great at adapting a website design to different window sizes – it allows you not only to tweak layout but also to send rescaled versions of the design’s images. HTML is less great. Well, OK. Adaptive image techniques There are a number of possible solutions, each with pros and cons, and it’s not as simple to find a graceful solution as you might expect. Adaptive Images
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.
Choosing a viewport for iPad sites - Allen Pike The iPad has made choosing a good viewport tag for your site more challenging. You now need to specify something that looks good with your content for screens that are 320px, 480px, 768px, and 1024px wide. Viewports Mobile Safari presents desktop-sized sites on small screens by rendering to a virtual browser screen that is 980px ((Of course, when the iPad is in landscape orientation of 1024px wide, it will use 1024px.)) wide, and letting you pan and zoom that page. Viewport tags let you tell Mobile Safari that your site displays properly narrower than 980px, and set other preferences for scaling your page. Craig Hockenberry famously determined the ideal viewport tag for content sites in the iPhone era. The Apple tech note ”Preparing Your Web Content for iPad” has a good suggestion: avoid hard-coding a width for your viewport. This is an improvement, but your content will still be blown up if your device is in landscape mode. Avoiding Blowup The initial-scale Hack
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
A Pixel Identity Crisis A note from the editors: This article was augmented post production with vendor prefix information to cover Webkit-based and Opera browsers. The pixel has always been the smallest unit in screen-based design. Because it’s been indivisible, it is the concrete unit of measurement among screen-based designers. Article Continues Below Now that hardware is changing and pixel densities are growing, pixels are struggling to find relevance as the stable unit they once were. The hardware pixel#section1 Most of us are familiar with the hardware pixel. The reference pixel and splitting atoms#section2 Things are changing for the pixel. Reference pixels are amazing, but now we have two conflicting definitions. Fig. 1: Standard pixel sizes on the Galaxy Tab and Kindle Fire. We also don’t know what each device considers a pixel and this is a problem. Identifying break points and moving forward#section3 It’s safe to say there is a problem with pixels. Managing multiple pixel definitions can be tricky.
» Responsive IMGs — Part 1 Cloud Four Blog In my post “Where are the Mobile First Responsive Web Designs”, I noted that one of the first things I look for when trying to determine whether or not a responsive web design is “mobile first” is whether or not it has a strategy for handling the IMG tag. A recent Smashing Magazine round up of responsive web design techniques included several new approaches for handling IMG tags which makes it the perfect time to dig into this problem and the potential solutions in more depth. Why IMG Tags Suck for Responsive Web Design If you want your site to load as quickly as possible, you do not want to deliver larger files than are needed. Many responsive web design sites provide mobile devices images at sizes appropriate for desktop and ask the mobile device to resize the image. In my research, I found nearly 80% decrease in file size by delivering images at the actual size they were going to be used on a mobile device. So what’s the problem with the IMG element in responsive designs?
» Responsive IMGs Part 2 — In-depth Look at Techniques Cloud Four Blog Responsive IMGs Part 2 — In-depth Look at Techniques In Responsive IMGs Part 1, I took a high-level look at what responsive IMGs are, the problem they are trying to solve, and the common issues they face. In this post, I’m going to take a deeper look at the specific techniques being used to provide responsive IMGs and try to evaluate what works and doesn’t. If you haven’t read part 1, you may want to do so before reading this post as it will help explain some of the terms I use. When I started working on this project two months ago, I thought I would get to the end and be able to say, “Here are the three approaches that work best. Go download them and figure out how to integrate them into your systems.” What I’ve found is that there is no comprehensive solution. Because of this, the best thing we can do is understand the common elements and challenges so that we can start to pick the best parts of each for building our own solutions. So um… this is a long post. Abandoned approaches 1. 2.