background preloader

A Compendium of SVG Information

A Compendium of SVG Information
A huge pile of information about SVG. How to Use SVG These are overview articles covering lots of stuff relating to SVG. Why to use it and the basics of how to use it. Mostly: <img>, background-image, <svg>, <iframe>, and <object>/<embed>. SVG as an Icon System SVG is particularly good for icons. I've written a bunch about this: Icon System with SVG SpritesThe whole idea is essentially based off SVG templatingSVG Sprites vs. And more from others: Any bit of SVG can be used inline and as an icon, but here's some nice ready-to-go ones with a nice click-for-the-code interface by Baptiste Briel. All that is based on inline SVG as a system, which is a fantastic way to go, but if you're going down the SVG as CSS background-image... Filament Group's Grunticon: Article, Repo, In-browser tool. And remember if you're looking for SVG icons to use, anything vector can be made to work. Here's some web apps that export to inline SVG sprites: SVG Shape Syntax SVG Patterns SVG Gradients SVG Strokes SVG and Text

https://css-tricks.com/mega-list-svg-information/

Related:  svgweb devOUTILS CSS JQUERYSVG

SVG Animation and CSS Transforms: A Complicated Love Story The following is a guest post by Jack Doyle, author of the GreenSock Animation Platform (GSAP). Jack has been deep in the woods of web animation for a long time, trying to make it easier and better. He's written here before, talking about how JavaScript animation can be the most performant choice (Google even recommends it). This time, he focuses on SVG animation, some pretty scary issues you may come across while manipulating them with CSS, and how you can solve those issues. SVG is all the rage these days, and browser support is generally excellent...with one glaring exception: CSS transforms.

5 Great Front-End Developer Tools You Must Try This is a tech post by Arnaud Breton, full-stack developer here at mention with a specific focus on the front-end side and user experience. Before joining mention, Arnaud was co-founder and CTO of UniShared and VideoNot.es, part of the Imagine K-12 2013 Winter batch. Over the last few years, we’ve seen tremendous growth in an entirely new generation of web applications. 10 jQuery Print Page Options Most websites still offer a print style sheet and did you ever wonder how possible is to use jQuery to create a print page button? In this post you will find 10 jQuery-made “print page” button, options and tutorials. Enjoy! Related Posts:

Styling – SVG 1.1 (Second Edition) Contents 6.1 SVG's styling properties SVG uses styling properties to describe many of its document parameters. Styling properties define how the graphics elements in the SVG content are to be rendered. SVG uses styling properties for the following: Parameters which are clearly visual in nature and thus lend themselves to styling.

Images in Markup — Web Fundamentals Use relative sizes for images Remember to use relative units when specifying widths for images to prevent them from accidentally overflowing the viewport. For example, width: 50%;, will cause the image width to be 50% of the containing element (not the viewport or actual pixel size). Because CSS allows content to overflow its container, it may be necessary use max-width: 100% to prevent images and other content from overflowing.

Manipulating the browser history - Web developer guide The DOM window object provides access to the browser's history through the history object. It exposes useful methods and properties that let you move back and forth through the user's history, as well as -- starting with HTML5 -- manipulate the contents of the history stack. Traveling through history

Understanding SVG Coordinate Systems & Transformations (Part 1) – The viewport, <code>viewBox</code>, & <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.

Angular SVG Path directive ITQuestionz.com Angular SVG Path directive 2014-11-14 11:19 | from Bit of a short question, but wondering why this is happening: SVG Essentials/Transforming the Coordinate System From WikiContent Up to this point, all graphics have been displayed "as is." There will be times when you have a graphic that you would like to move to a new location, rotate, or scale. To accomplish these tasks, you add the transform attribute to the appropriate SVG elements. This chapter examines the details of these transformations. The translate Transformation

Getting your Social Share Counts with PHP - Web Design Having a strong online social presence is a great way of engaging and interacting with your visitors, and potential customers / clients. But how do you actually track how engaged your content is and how many times it has been shared? Thankfully, for any web developer, designer or webmaster, there is a great selection or tools available that'll quickly pull in your social counts such as AddThis or ShareThis. But what if you don't want an overly bloated solution to a somewhat trivial task?

PatternBolt The pattern selection still be under development, if you want to contribute to the project, you can vote the patterns proposals on the Trello board with just a click. Of course you can also submit your own pattern just requesting an invitation for the board. Just a small raster preview of the pattern is needed for the vote, but it's important for the original version of the pattern to be vector graphics (.svg, .ai, .pdf,...) otherwise it will not be compatible with PatternBolt. Making SVGs Responsive with CSS 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. An SVG can be embedded on a web page in many ways; one of which is embedding it inline in an HTML5 page using the <svg> tag.

New Project: rotate3Di jQuery Plugin updated: published: topics:

Related: