download notepad
http://notepad-plus-plus.org/download/v6.3.2.html
http://thenewboston.org/watch.php?cat=43&number=6
///////////////////////////////////////////
introduction html5
html4>5
xml(1998)/css/(1966)
xhr()1999)
a,jax(2004)
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics that has support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.
SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and, if need be, compressed. As XML files, SVG images can be created and edited with any text editor, but it is often more convenient to create them with drawing programs such as Inkscape.
All major modern web browsers—including Mozilla Firefox, Internet Explorer 9 and 10, Google Chrome, Opera, and Safari—have at least some degree of support for SVG and can render the markup directly.
The SVG 1.1 specification defines 14 functional areas or feature sets:[12]
- Paths
- Simple or compound shape outlines are drawn with curved or straight lines that can be filled in, outlined, or used as a clipping path. Paths have a compact coding. For example M (for ‘move to’) precedes initial numeric x and y coordinates and L (line to) precedes a point to which a line should be drawn. Further command letters (C, S, Q, Tand A) precede data that is used to draw various Bézier and elliptical curves. Z is used to close a path. In all cases, absolute coordinates follow capital letter commands and relative coordinates are used after the equivalent lower-case letters.[27]
- Basic shapes
- Straight-line paths and paths made up of a series of connected straight-line segments (polylines), as well as closed polygons, circles and ellipses can be drawn. Rectangles and round-cornered rectangles are also standard elements.[28]
- Text
- Unicode character text included in an SVG file is expressed as XML character data. Many visual effects are possible, and the SVG specification automatically handles bidirectional text (for composing a combination of English and Arabic text, for example), vertical text (as Chinese was historically written) and characters along a curved path (such as the text around the edge of the Great Seal of the United States).[29]
- Painting
- SVG shapes can be filled and/or outlined (painted with a color, a gradient, or a pattern). Fills can be opaque or have any degree of transparency. “Markers” are line-end features, such as arrowheads, or symbols that can appear at the vertices of a polygon.[30]
- Color
- Colors can be applied to all visible SVG elements, either directly or via ‘fill’, ‘stroke,’ and other properties. Colors are specified in the same way as in CSS2, i.e. using names like
blackorblue, in hexadecimal such as#2f0or#22ff00, in decimal likergb(255,255,127), or as percentages of the formrgb(100%,100%,50%).[31] - Gradients and patterns
- SVG shapes can be filled or outlined with solid colors as above, or with color gradients or with repeating patterns. Color gradients can be linear or radial (circular), and can involve any number of colors as well as repeats. Opacity gradients can also be specified. Patterns are based on predefined raster or vector graphic objects, which can be repeated in x and/or y directions. Gradients and patterns can be animated and scripted.[32]
- Since 2008, there has been discussion[33][34] among professional users of SVG that either gradient meshes or preferably diffusion curves could usefully be added to the SVG specification. It is said that a “simple representation [using diffusion curves] is capable of representing even very subtle shading effects”[35] and that “Diffusion curve images are comparable both in quality and coding efficiency with gradient meshes, but are simpler to create (according to several artists who have used both tools), and can be captured from bitmaps fully automatically.”[36]
- Clipping, masking and compositing
- Graphic elements, including text, paths, basic shapes and combinations of these, can be used as outlines to define both ‘inside’ and ‘outside’ regions that can be painted (with colors, gradients and patterns) independently. Fully opaque clipping paths and semi-transparent masks are composited together to calculate the color and opacity of every pixel of the final image, using alpha blending.[37]
- Filter effects[38]
Main article: SVG filter effects
- Interactivity
- SVG images can interact with users in many ways. In addition to hyperlinks as mentioned below, any part of an SVG image can be made receptive to user interface eventssuch as changes in focus, mouse clicks, scrolling or zooming the image and other pointer, keyboard and document events. Event handlers may start, stop or alter animations as well as trigger scripts in response to such events.[39]
- Linking
- SVG images can contain hyperlinks to other documents, using XLink. URLs of SVG images can specify geometrical transforms in the fragment section.[40]
- Scripting
- All aspects of an SVG document can be accessed and manipulated using scripts in a similar way to HTML. The default scripting language is ECMAScript (closely related toJavaScript) and there are defined Document Object Model (DOM) objects for every SVG element and attribute. Scripts are enclosed in
elements. They can run in response to pointer events, keyboard events and document events as required.[41] - Animation
- SVG content can be animated using the built-in animation elements such as
,and. Content can be animated by manipulating the DOM using ECMAScript and the scripting language’s built-in timers. SVG animation has been designed to be compatible with current and future versions ofSynchronized Multimedia Integration Language (SMIL). Animations can be continuous, they can loop and repeat, and they can respond to user events, as mentioned above.[42] - Fonts
- As with HTML and CSS, text in SVG may reference external font files, such as system fonts. If the required font files do not exist on the machine where the SVG file is rendered, the text may not appear as intended. To overcome this limitation, text can be displayed in an ‘SVG font’, where the required glyphs are defined in SVG as a font that is then referenced from the
element.[43] - Metadata
- In accord with the W3C‘s Semantic Web initiative, SVG allows authors to provide metadata about SVG content. The main facility is the
element, where the document can be described using Dublin Core metadata properties (e.g., title, creator/author, subject, description, etc). Other metadata schemas may also be used. In addition, SVG definesandelements where authors may also provide plain-text descriptive material within an SVG image to help indexing, searching and retrieval by a number of means.[44]
An SVG document can define components including shapes, gradients etc., and use them repeatedly. SVG images can also contain raster graphics, such as PNG and JPEGimages, and further SVG images.
[edit]SVG on the web
Google announced on 31 August 2010 that it had started to index SVG content on the web, whether it is in standalone files or embedded in HTML, and that users would begin to see such content listed among their search results.[45] It was announced on 8 December 2010 that Google Image Search would also begin indexing SVG files.[46] On 28 January 2011, it was discovered that Google was allowing Image Search results to be restricted exclusively to SVG files.[47] This feature was announced officially on 11 February 2011.[48]
[edit]Example
This code will show you a rectangle:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>
svg(web vector graphics)
-scalable vector graphics
rectagle
<rect x,y width/…..
……id and css class
html likes for drawing
….
animated graphics
scalable vector graphics
one of the benefits of the technology
JavaScriptAPI(‘Scriptable Image Tag”)
<canvas id- "myCanvas" width-= "150" height = ""
varcanvas
var six
mozilla download center– a map of the wolr the svg map-
benjamin joffes
population demo
think about data visualizations
————————————-recordings ———–ur. data bases
bespin (created by mozilla)
again a data visualization for svg and canvas by the german elections
it supports all the modern ——-svg web / java script base
SVG web
SVG is the future so is the main requirment for obtaining a minimal understanding of
canvas and svg (they are
html 5 video
application cashe-database
embedding video -multiple files and scripting
controls >
your browser does not …..
using that y can draw stuff on your video and y can control many attributes by js
controls >
your browser does not …..
using that y can draw stuff on your video and y can control many attributes by js
http://www.youtube-nocookie.com/v/uofWfXOzX-g?version=3&hl=en_US
http://www.youtube-nocookie.com/v/uofWfXOzX-g?version=3&hl=en_US
http://www.youtube-nocookie.com/v/HfCDAIIR2Gc?version=3&hl=en_US
http://www.youtube.com/watch?v=HfCDAIIR2Gc
http://thenewboston.org/watch.php?cat=43&number=2
your browser does not …..
var v = document.getElementsByTagName (“video”) [0];
v.play();
