stevie-mayhew / silverstripe-svg
Basic SVG support for SilverStripe
Installs: 226 872
Dependents: 9
Suggesters: 3
Security: 0
Stars: 22
Watchers: 2
Forks: 8
Open Issues: 3
Type:silverstripe-vendormodule
Requires
- silverstripe/framework: ^4.0 || ^5.0
Requires (Dev)
- phpunit/phpunit: ^9
README
Basic SVG support for SilverStripe templates
Requirements
SilverStripe 4 or higher
Installation
composer require stevie-mayhew/silverstripe-svg
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
StevieMayhew\SilverStripeSVG\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>