adding rich grapics and media yo web content in safari

6/10/08 15:30
In Safari 4 , It will be easy to adding rich grapics and medias
Here is how Setting and getting image data
  • GetDefault
  • Getlmage
  • workPlace()
  • frame.setSize()
  • super.paint()
for exp.

  • if (findOil == true) g2.drawImage(pic[8],moveOilX,moveOilY+80,this );
  • toDataURL(save your new image)


Scalable Vector Graphics (SVG) is an XML specification and file format for describing two-dimensional vector graphics, both static and animated.
SVG can be purely declarative or may include scripting. Images can contain hyperlinks using outbound simple XLinks. It is an open standard created by the W3C's SVG Working Group.
SVG allows three types of graphic objects:
  • Vector graphics
  • Raster graphics
Scripting and animation SVG drawings can be dynamic and interactive. Time-based modifications to the elements can be described in SMIL, or can be programmed in a scripting language (e.g., ECMAScript). The W3C explicitly recommends SMIL as the standard for animation in SVG,[6] however it is more common to find SVG animated with ECMAScript because it is a language that many developers already understand, and it is more compatible with existing renderers. A rich set of event handlers such as onmouseover and onclick can be assigned to any SVG graphical object.


SVG is an application of XML. An SVG file is therefore a simple text file, which can be viewed and edited as with any other markup.

All graphics submitted to the project should be placed into the Public Domain according to the statement by the Creative Commons. If you'd like to help out, please join the mailing list. Also, browse the archives to review the project's history. Logo Usage Guidelines These are the general style guidelines for the usage of this logo. Please note that the single color versions of the logo color may be changed to suit a particular situation. All versions are available as SVG files.

More in

CSS Masks

WebKit now supports alpha masks in CSS. Masks allow you to overlay the content of a box with a pattern that can be used to knock out portions of that box in the final display. In other words, you can clip to complex shapes based off the alpha of an image. Here is a snapshot of the Speed Racer movie trailer clipped to the Safari compass icon. This is in fact a mask applied to the
Web designers with a lot of control over these masks and how they are applied. The new properties are analogous to the background and border-image properties that already exist.
  • -webkit-mask (background)
  • -webkit-mask-attachment (background-attachment)
  • -webkit-mask-clip (background-clip)
  • -webkit-mask-origin (background-origin)
  • -webkit-mask-image (background-image)
  • -webkit-mask-repeat (background-repeat)
  • -webkit-mask-composite (background-composite)
  • -webkit-mask-box-image (border-image)

0 评论: