background preloader

SVG

Facebook Twitter

Elastic SVG Elements. Towards a Resolution-Independent Web with SVG. The Web Platform has gone a long way since HTML5 was first made popular and people started looking into JavaScript as a language that could do build complex apps.

Towards a Resolution-Independent Web with SVG

Many APIs have emerged and there is an abundance of content out there about how the browser can leverage all this. This specific article series will go a step further and focus on how these powerful technologies can be leveraged in practise, not to building cool demos and prototypes, but how real practitioners use them in the trenches. In this (post)HTML5 series, we'll go beyond buzzwords and get practical insight from experts about what has actually worked for them. We'll also talk about technologies (like AngularJS) that go a step further, and define the future of how the standards and web development will evolve.

This InfoQ article is part of the series “Next Generation HTML5 and JavaScript”. Designers Ideal for resolution-independent user interface icons One less step in the designer’s workflow. Better Open Source tools. Browser SVG support. About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

browser SVG support

The site was built and is maintained by Alexis Deveria, with occasional updates provided by the web development community. The design used as of 2014 was largely created by Lennart Schoors. May I use your data in my presentation/article/site, etc? Yes, the support data on this site is free to use under the CC BY 4.0 license. Is there a way to see the support data in colors other than red/green? Yes, you can enable accessible colors from this link or from the option under Settings. Do you have the data available in a raw format? Yes, the raw support data is available on GitHub and is updated regularly. Could you add feature X to the site? Adding features takes quite some time and there are many requests for additions. If you've done the research yourself already, you can also submit a feature on GitHub. Which features do you choose to add to this list? Adobe SVG Viewer 6.0 beta. Adobe SVG Viewer 3.0.

SVG history. SVG 1.0. W3C Recommendation 04 September 2001 This version: (Available as: PDF, zip archive of HTML) Latest version: Previous version: Editor: Jon Ferraiolo <jferraio@adobe.com> Authors: See author list Copyright ©1998, 1999, 2000, 2001 W3C® (MIT, INRIA, Keio), All Rights Reserved.

SVG 1.0

Abstract This specification defines the features and syntax for Scalable Vector Graphics (SVG), a language for describing two-dimensional vector and mixed vector/raster graphics in XML. Status of this document This section describes the status of this document at the time of its publication. This document has been reviewed by W3C Members and other interested parties and has been endorsed by the Director as a W3C Recommendation.

This document has been produced by the W3C SVG Working Group as part of the activity of the Graphics Activity within the W3C Document Formats Domain. SVG 1.1 DOM. Contents This appendix is normative.

SVG 1.1 DOM

B.1 SVG DOM overview This appendix provides an introduction to the SVG DOM and discusses the relationship of the SVG DOM with the Document Object Model (DOM) Level 2 Core Specification [DOM2]. The specific SVG DOM interfaces that correspond to particular sections of the SVG specification are defined at the end of corresponding chapters in this specification, as follows: The SVG DOM builds upon and is compatible with DOM Level 2. The SVG DOM requires complete support for DOM Level 2 Core [DOM2]Wherever appropriate, the SVG DOM is modeled after and maintains consistency with the Document Object Model HTML ([DOM1], chapter 2).The SVG DOM requires complete support for DOM Level 2 Views [DOM2VIEWS].The SVG DOM requires support for relevant aspects of DOM Level 2 Events [DOM2EVENTS]. A DOM application can use the hasFeature method of the DOMImplementation interface to verify that the interfaces listed in this section are supported.

DOMString floatlongshort. SVG 1.1. W3C Recommendation 16 August 2011 This version: Latest version: Previous version: Public comments: www-svg@w3.org (archive) Editors: Erik Dahlström, Opera Software <ed@opera.com> Patrick Dengler, Microsoft Corporation <patd@microsoft.com> Anthony Grasso, Canon Inc.

SVG 1.1

Chris Lilley, W3C <chris@w3.org> Cameron McCormack, Mozilla Corporation <cam@mcc.id.au> Doug Schepers, W3C <schepers@w3.org> Jonathan Watt, Mozilla Corporation <jwatt@jwatt.org> ForeignObject: Hey, you’ve got HTML in my SVG! Monday, September 1st, 2008 <p>The SVG foreignObject tag allows you to mix non-SVG content into your page.

foreignObject: Hey, you’ve got HTML in my SVG!

For example, you could drop some HTML in the middle of an SVG element. Firefox 3 recently announced support for foreignObject; both Safari and Opera have supported this tag for awhile. From Mark Finkle comes two examples (1, 2). The first embeds some HTML text into SVG shapes to take advantage of HTML’s nice reflowing and text abilities: Screenshot of HTML embedded in SVG.