Categories

Partners
  • Adobe Photoshop Tutorials

  • Website Templates

  • Free Stock Photos and Images

  • Adobe Photoshop Tutorials
  • Search


    Advanced Search




    Partner Links
  • Flash Web Sites

  • flash websites


    SVG Basics - The 'image' Element
    Published  07/16/2006 | SVG Viewer
       




    The 'image' Element

    SVG's image element allows you to render the contents of another file into the SVG document. SVG viewers are required to support PNG, JPEG and SVG format files. The first two are useful when you want to add a bitmap (photographic) image to your document. Images are all displayed as 4 channel (RGBA) so any transparency in the PNG or SVG will be preserved and images with fewer than 4 channels are converted.

    Images which are themselves SVG behave like bitmap images. Your document does not inherit (gain) elements from the image's SVG file and the image's SVG cannot modify the documents it is added to. Technically, images are parsed separately from the file they are contained in and have their own separate document object model.

    <image x="0" y="20" width="200" height="180" xlink:href="cat.png" />
    Code 1. Image. The file linked to can be a PNG, JPEG or SVG.
    Article Series
    This article is part 4 of a 15 part series. Other articles in this series are shown below:
    1. SVG Basics - Introduction
    2. SVG Basics - File Structure
    3. SVG Basics - Shapes
    4. SVG Basics - The 'image' Element
    5. SVG Basics - Text in SVG. The 'text' element
    6. SVG Basics - Coloring Objects in SVG
    7. SVG Basics - Organizing SVG code
    8. SVG Basics - The Basics of SVG styling
    9. SVG Basics - Gradients
    10. SVG Basics - Patterns, Markers and SVG
    11. SVG Basics - Transforms
    12. SVG Basics - Clipping
    13. SVG Basics - Masking - The 'mask' element
    14. SVG Basics - Path Element
    15. SVG Basics - JavaScript in SVG