# 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 create with:
const image = parentElement.add('image')
It's possible create 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( _ )
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:
{} _
returns:
{gySVGObject}
The original object
const class = element.class();
Get the class
current value.
- returns:
{}
# .style()
image.style( _ )
Set the style
attribute allows to style
an element using CSS declarations. It functions identically to the style
attribute in HTML.
argument:
{} _
returns:
{gySVGObject}
The original object
const style = element.style();
Get the style
current value.
- returns:
{}
# .transform()
image.transform( _ )
Set the transform
attribute defines a list of transform
definitions that are applied to an element and the element's children.
argument:
{} _
returns:
{gySVGObject}
The original object
const transform = element.transform();
Get the transform
current value.
- returns:
{}
# .x()
image.x( _ )
Set the x
attribute defines a x
-ax
is coordinate in the user coordinate system.
argument:
{} _
returns:
{gySVGObject}
The original object
const x = element.x();
Get the x
current value.
- returns:
{}
# .y()
image.y( _ )
Set the y
attribute defines a y
-axis coordinate in the user coordinate sy
stem.
argument:
{} _
returns:
{gySVGObject}
The original object
const y = element.y();
Get the y
current value.
- returns:
{}
# .width()
image.width( _ )
Set the width
attribute defines the horizontal length of an element in the user coordinate system.
argument:
{} _
returns:
{gySVGObject}
The original object
const width = element.width();
Get the width
current value.
- returns:
{}
# .height()
image.height( _ )
Set the height
attribute defines the vertical length of an element in the user coordinate system.
argument:
{} _
returns:
{gySVGObject}
The original object
const height = element.height();
Get the height
current value.
- returns:
{}
# .href()
image.href( imageURL )
Set the href
attribute. It defines a URL referring to the image to render.
argument:
{string} imageURL
Image URLreturns:
{gySVGObject}
The original object
const imageURL = element.href();
Get the href
current value.
- returns:
{string}
The current image URL
# .preserveAspectRatio()
image.preserveAspectRatio( _ )
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:
{} _
returns:
{gySVGObject}
The original object
const preserveAspectRatio = element.preserveAspectRatio();
Get the preserveAspectRatio
current value.