Animating Vectors with SVG It is almost 2014 and fifteen years ago the W3C started to develop a web-based scalable vector graphics (SVG) format. As web technologies go, this one is pretty old and well entrenched. Embed not working on your device? Try direct. Unlike rasterized images, SVG files will stay crisp and sharp at any resolution. I’m a big fan of SVG. But, if SVG is so great, why doesn’t it get more attention? The simple answer is that for a long time it wasn’t well supported, so no one touched the technology. Although the browsers support SVG, it is implemented in many different ways. SVG in HTML Some browsers allow you to embed SVG right in the HTML: the <svg> element. Alexey Ten came up with a brilliant little trick that uses inline SVG combined with an SVG <image> element. It is a great workaround for most situations. So it can be used in HTML. There are two compelling reasons why vector graphics in the form of icons and symbols are going to be important on the web. Next, we move to the draw() function.
Scaling SVG Explained Scaling <svg>s can be a daunting task, since they act very differently than normal images. Instead of thinking of <svg>s as images, let's change our mindset: The <svg> element is a telescope into another world. Much like everything inside of an <iframe> on another webpage, everything inside of an <svg> element is in another world. Our telescope defaults to a normal zoom level: one "unit" is the same as one pixel. The viewBox attribute is our way to change the settings on our telescope. viewBox should be set to a string, containing four numbers separated by spaces: x and y set the position of the top, left corner of our view box.Changing these values will pan our view.width and height set the number of "units" that are visible inside of our view box.Changing these values will zoom our view. Let's explore different telescope settings for a simple svg with a 10x10 pixel white grid:
Skywalker13 | Diary of a GeeXboX developer… 50+ incredible freebies for web designers, March 2015 The Web is packed with some of the most amazing, inspiring, and downright cool projects that you’ll ever see. And thanks to the fantastic web design community, many of them are completely free. Today we’re continuing our monthly roundup of the best resources for web designers. 50+ CSS Button Designs A large collection of buttons created with CSS for you to integrate into your development, making use of the provided source code. Wood Vector Pattern A customizable pattern to give your design elements a bit more realism and detail. Samsung Galaxy Note Mockups A nice trio of Galaxy Note mockups you can use in presentations or for design purposes. Moto 360 Watch Sketch Resource A well-layered set with the Moto 360 Watch as the main protagonist. Flat Vector Devices Pack An awesome collection of devices to use for mockups and development. Freebie: Kitchen Icon Set An awesome pack of 40 simple icons related to food and cooking, coming in PSD, PNG, EPS and AI formats for easy editing. Lynny Vector Icons
Tools for Optimizing SVG Optimizing Directly Out of Design Tools Typically, when you export SVG out of a design tool it is in dire need of optimization. Hence, all the tools in this article. The design tool itself can help though, at least somewhat. Sketch’s svgo-compressor (there is also a Sketch-specific web app for this called SVGito)Figma does its best by defaultIllustrator has SVG NOWInkscape can export as “Optimized SVG” (uses Scour internally) or use SVGO-Inkscape
Create A Simple WordPress FAQ Plugin A “Frequently Asked Questions” section is a great tool to give your customers the right answer to their questions. That’s becoming very popular. But very often FAQs are integrated within premium theme, but what about free themes? Here is a tutorial to create a simple FAQ plugin that will work with any theme. This tutorial will be covering only basics steps so that you can then customize the FAQ section and make it your own! Step 1: Create The Plugin To start, create a new folder in your “wp-content/plugins” folder called “rc-faq”. Step 2: Register The FAQ Custom Post Type We now need to register a custom post type. Please note the use of the apply_filters() function. Step 3: Create A Shortcode To Display FAQs This step is where we are going to create a simple shortcode with only one parameter that will show the FAQs to your visitor. The shortcode will have a unique “limit” parameter that defines the number of items to show. And that’s it ! The Final Result And on the visitors’ side:
The 10 Commandments of Good Form Design on the Web – Mono 1. Thou shalt provide clear, always visible labels for each field There is a trend in web design to show form labels only when a field is focussed. This can be cool on a simple form like a username/password form, but for anything longer it is probably a bad idea. When you have the space to show labels, do so. Especially in a long form a user will review the input he or she entered; when you can’t read which field corresponds to which label there is no way to do a good review. 2. Your fonts have to be big enough to be legible. As an added benefit, if you specify a font size of 16 pixels for input sizes, iOS will not zoom in anymore when you tap a field, simply because it is not needed. 3. It is likely these days that that someone is using your form on a touch device. The default input field in Bootstrap 3 is 32px in height, this is a good base size. 4. A form that sizes the input fields according to their expected input is easier to read. 5. 6. 7. 8. 9. 10. Data comes in many formats.
The Simple Intro to SVG Animation This article serves as a first step toward mastering SVG element animation. Included within are links to key resources for diving deeper, so bookmark this page and refer back to it throughout your journey toward SVG mastery. An SVG element is a special type of DOM element that mimics the syntax of a standard HTML element. SVG elements have unique tags, attributes, and behaviors that allow them to define arbitrary shapes -- essentially providing the ability to create an image directly within the DOM, and thereby benefit from the JavaScript- and CSS-based manipulation that DOM elements can be subjected to. As a teaser of what we're about to learn, check out these demos that are only possible thanks to SVG: There are three significant benefits to creating graphics in SVG rather than using rendered images (PNG, JPEG, etc.): First, SVG compresses incredibly well; graphics defined in SVG have smaller file sizes than their PNG/JPEG equivalents. SVG Animation SVG Styling Positional Attributes vs.
MagicSuggest This combo was generated with the default options. With no configuration options set, you have the following behaviour: - the side trigger is visible and the selected items appear within the combo itself. - suggestions will appear as the user starts typing - the user can toggle the suggestions using arrow keys - the user can delete selected items by using backspace - the user can hold the ctrl key to select multiple items - the user is free to enter new input using the enter key after having entered text There are many configuration options that allow you to customize the component. Installation Guide 1. 2. 3. (Requires jQuery 1.8 or higher to work.) 4. $(el).magicSuggest({options}); Configuration Properties Notice for 1.2.5+ users Note that as of version 1.2.5, the component's configuration is also generated from the original DOM element container. The following 2 blocks of code will generate the same component: Config options allowFreeEntries boolean cls string data array / string / function dataUrlParams
Design Tip: Never Use Black One of the most important color tricks I’ve ever learned was to avoid using the color black in my work. Mrs. Zamula, my childhood art teacher, first warned me about black when I was in middle school. And I heard the same again multiple times at RISD. It sounds weird at first, but it’s good advice. Problem is, we see dark things and assume they are black things. Shadows aren’t black. In high school, I spent lots of my free time in the art room with a few other art-loving friends. I probably went through that book ten times. His shadows are some of the most saturated parts of his paintings, and that’s on the screen too. Now you might be thinking, “Yeah, but those are paintings. But I must have been thinking the same thing, because one of those days in art class Mrs. I was amazed. The corner of Chestnut and Polk. The darkest part of that image? Black overpowers everything else. When you put pure black next to a set of meticulously picked colors, the black overpowers everything else. Mrs.
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. 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. While exporting .svg from AI, default settings work just fine. Some points to take in mind while creating SVGs in a graphic editor: Optimizing SVG code I personally don’t use tools to automatically clean up SVG code for me. Animating the SVG That’s it!
Technosorcery