Scalable Vector Graphics

From Slick2D Wiki
Jump to: navigation, search

Scalable Vector Graphics (SVG) use XML files to describe 2d graphics. While other image formats like GIF or JPG represent images as arrays of colored pixels, SVG represents an image as a list of lines and shapes. The benefit of SVG images is that they can be cleanly scaled in size without causing aliasing (jagged or blurry edges). SVG images can be created with the open source program Inkscape.

Slick currently supports many (but not all) SVG features. Features not yet supported include:

  • Cloned objects
  • Paths with jumps (ie shapes with multiple subshapes)


To display an SVG image in Slick, use the SimpleDiagramRenderer class. This will allow you to render the SVG using the primitive geometry entities provided by Slick.

SimpleDiagramRenderer svgimg = 
   new SimpleDiagramRenderer(InkscapeLoader.load("image.svg"));

In your game's render() method, the SVG's own render method must be called to draw it to screen:

public void render(GameContainer container, Graphics g) throws SlickException {

The shapes within an SVG are represented by the Figure class. You can access attributes of a figure using the getData() function. This can be used to obtain attributes related to how the image is rendered (colors, line widths, etc) as well as any other attributes defined in the XML describing the diagram. For example, to obtain both the fill color for the first shape in a diagram, as well as its ID, you would use:

Color c = svgimg.diagram.getFigure(0).getData().getAsColor(NonGeometricData.FILL);
String id = svgimg.diagram.getFigure(0).getData().getAttribute("id");

See Also[edit]