Graphery SVG

# image

The image SVG element includes images inside SVG documents. It can display raster image files or other SVG files.

The only image formats SVG software must support are JPEG, PNG, and other SVG files. Animated GIF behavior is undefined.

SVG files displayed with image are treated as an image: external resources aren't loaded, :visited styles aren't applied, and they cannot be interactive. To include dynamic SVG elements, try use with an external URL. To include SVG files and run scripts inside them, try object inside of foreignObject.

image implements the SVGImageElement interface.

Basic rendering of a PNG image in SVG:

Usually, this element is created with:

const image = parentElement.add('image')

It's possible to create it as a disconnected element with gySVG('image') and attach it to the SVG document with .attachTo().

More info: mdn (opens new window) | w3c (opens new window)

# .class()

image.class( name )

Set assigns a class name or set of class names to an element. You may assign the same class name or names to any number of elements, however, multiple class names must be separated by whitespace characters.

  • argument: {string} name The class name

  • returns: {gySVGObject} The original object

const class = element.class();

Get the class current value.

  • returns: {string}

# .style()

image.style( style )

Set the style attribute allows to style an element using CSS declarations. It functions identically to the style attribute in HTML.

  • argument: {string} style The style value

  • returns: {gySVGObject} The original object

const style = element.style();

Get the style current value.

  • returns: {string}

# .transform()

image.transform( transform )

Set the transform attribute defines a list of transform definitions that are applied to an element and the element's children.

  • argument: {string} transform The transform definition

  • returns: {gySVGObject} The original object

const transform = element.transform();

Get the transform current value.

  • returns: {string}

# .x()

image.x( x )

Set the x attribute defines a x-axis coordinate in the user coordinate system.

  • argument: {number|string} x The x value (length or percentage)

  • returns: {gySVGObject} The original object

const x = element.x();

Get the x current value.

  • returns: {number|string}

# .y()

image.y( y )

Set the y attribute defines a y-axis coordinate in the user coordinate system.

  • argument: {number|string} y The y value (length or percentage)

  • returns: {gySVGObject} The original object

const y = element.y();

Get the y current value.

  • returns: {number|string}

# .width()

image.width( w )

Set the width attribute defines the horizontal length of an element in the user coordinate system.

  • argument: {number|string} w The width value (length or percentage)

  • returns: {gySVGObject} The original object

const width = element.width();

Get the width current value.

  • returns: {number|string}

# .height()

image.height( h )

Set the height attribute defines the vertical length of an element in the user coordinate system.

  • argument: {number|string} h The height value (length or percentage)

  • returns: {gySVGObject} The original object

const height = element.height();

Get the height current value.

  • returns: {number|string}

# .href()

image.href( imageURL )

Set the href attribute. It defines a URL referring to the image to render.

  • argument: {string} imageURL Image URL

  • returns: {gySVGObject} The original object

const imageURL = element.href();

Get the href current value.

  • returns: {string} The current image URL

# .preserveAspectRatio()

image.preserveAspectRatio( aspectRatio )

Set the preserveAspectRatio attribute indicates how an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio.

  • argument: {string} aspectRatio The aspect ratio value

  • returns: {gySVGObject} The original object

const preserveAspectRatio = element.preserveAspectRatio();

Get the preserveAspectRatio current value.

← line →