Basic SVG support for SilverStripe
PHP
Latest commit 8660b71 Jun 1, 2016 @stevie-mayhew Merge pull request #8 from adrexia/feature/stroke
Ability to set stroke color on svg
Permalink
Failed to load latest commit information.
_config
code Ability to set stroke color on svg May 31, 2016
.editorconfig Added standard .editorconfig file Dec 16, 2015
LICENSE
README.md
composer.json

README.md

SilverStripe SVG

Basic SVG support for SilverStripe templates

Requirements

SilverStripe 3.1 or higher

Installation

composer require stevie-mayhew/silverstripe-svg:1.0.*

Configuration

You can set the base path for where your SVG's are stored. You can also add extra default classes to the SVG output

SVGTemplate:
  base_path: 'themes/base/production/svg/'
  default_extra_classes:
    - 'svg-image'

Usage

In a SilverStripe template simply call the SVG template helper.

<!-- add svg -->
{$SVG('name')}
<!-- add svg with id 'testid' -->
{$SVG('with-id', 'testid')}

There also helper functions for width, height, size, fill, adding extra classes, setting a custom/alternative base path and specifying a sub-folder within the base path (for those who want to categories and folder off your images).

<!-- change width -->
{$SVG('name').width(200)}

<!-- change height -->
{$SVG('name').height(200)}

<!-- change size (width and height) -->
{$SVG('name').size(100,100)}

<!-- change fill -->
{$SVG('name').fill('#FF9933')}

<!-- change stroke -->
{$SVG('name').stroke('#FF9933')}

<!-- add class -->
{$SVG('name').extraClass('awesome-svg')}

<!-- specify a custom base path -->
{$SVG('name').customBasePath('assets/Uploads/SVG')}

<!-- specify a sub-folder of the base path (can be called multiple times) -->
{$SVG('name').addSubfolder('MyDir')}
{$SVG('name').addSubfolder('MyDir/MyOtherDir')}
{$SVG('name').addSubfolder('MyDir').addSubfolder('MyOtherDir')}

These options are also chainable.

{$SVG('name').fill('#45FABD').width(200).height(100).extraClass('awesome-svg').customBasePath('assets/Uploads/SVG').addSubfolder('MyDir')}

Example Output

<svg xmlns="http://www.w3.org/2000/svg" viewBox="248.5 0 464.8 560" enable-background="new 248.5 0 464.8 560" class="svg-name"><path d="M550.9 0H248.5v560h464.8V154.9L550.9 0zM648 149.3H534.1V41.1L648 149.3zm22.4 369.6H289.6V41.1h205.3v149.3h177.3v328.5h-1.8zM343.7 272.5h272.5v41.1H343.7zM343.7 369.6h272.5v41.1H343.7z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="248.5 0 464.8 560" enable-background="new 248.5 0 464.8 560" class="svg-with-id svg-test-id" id="test-id"><path d="M550.9 0H248.5v560h464.8V154.9L550.9 0zM648 149.3H534.1V41.1L648 149.3zm22.4 369.6H289.6V41.1h205.3v149.3h177.3v328.5h-1.8zM343.7 272.5h272.5v41.1H343.7zM343.7 369.6h272.5v41.1H343.7z"></path></svg>