# Plugin: SVG Grid Image

### related

#### @function susy-svg-grid()

## Overview

If you want to generate svg-backgrounds for help visualizing and debugging your grids, import the SVG Grid Plugin.

The plugin adds `svg-grid-colors` setting to your global defaults, which you can override in `$susy`. It also provides you with a new function, `susy-svg-grid()`, which will return inline svg for use in backgrounds or generated content.

This function come with an unprefixed alias by default, using the `svg-grid` import. If you only only want prefixed versions of the API, import the `svg-grid/prefix` partial instead.

### Examples

scss importing the plugin

    // The full path to import Susy will depend on your setup…

    // unprefixed
    @import 'plugins/svg-grid';

    // prefixed
    @import 'plugins/svg-grid/prefix';

scss generating background grids

    .grid {
      background: susy-svg-grid() no-repeat scroll;
    }

css compiled

    .grid {
      background: susy-svg-grid() no-repeat scroll;
    }

## @function susy-svg-grid()

aliased as svg-grid()

### Description

Return inline svg-data in to display the grid.

### Parameters & Return

#### $grid: $susy (Map | List)

Map or shorthand defining the current grid

#### $colors: null (Color | List | null)

Column color, or list of colors for column-gradient, used to override the global `svg-grid-colors` setting

#### $offset: null (Length | null)

Manually override the default grid-image offset, to account for grid edges

#### @return (String)

CSS inline-data SVG string, in `url(<svg>)` format, for use in image or content properties

### Example

scss

    .grid {
      background: susy-svg-grid() no-repeat scroll;
    }

css compiled

    .grid {
      background: susy-svg-grid() no-repeat scroll;
    }

### requires

#### @function susy-compile()

#### @function susy-get()

#### @function _susy-svg-gradient() [private]

#### @function _susy-svg-color() [private]

#### @function su-call()

#### @function _susy-svg-offset() [private]

#### @function susy-span()

#### @function _susy-svg-column-position() [private]

#### @function _susy-svg-rect() [private]

### used by

#### @function svg-grid()