Adding SVG Icon
When it comes to adding imagery to your website, there are two basic image types to choose from: raster images and vector images.
A raster image, typically a photograph, is made up of pixels and has a set resolution. When scaled up, it will lose quality and can appear pixelated or grainy.
A vector image is created using points, lines, and shapes. You can scale vector images to any size without losing quality.
With responsive design, images often need to be used at a variety of dimensions for different screen sizes. While there are numerous approaches to account for these issues with raster images, there is an even easier solution for vector-based graphics: use SVG.
To add an SVG icon to the field,
- Select
Add SVG Icon
option from the drop down.
- Clicking on
Add SVG Icon
button will open a popup showing all the animated icons sorted by category.
- Select the icon you want to add to the page and this will activate the styling editor.
You can now change the stroke color and stroke width in the styling editor.
Once you are happy with the changes, select the
Done
button to add the SVG icon to the field.
#
Changing Stroke ColorOnePlugin Fields let you change the stroke colors of the selected SVG icon.
You can do that by clicking on the color palette and after selecting the color, you have to click on the Apply
button. This will update the icon preview for you to verify the changes.
You can also set the default colors in the Settings page to reflect the color theme of your website. This will save you the hassle of doing this every time you select an icon.
#
Changing Stroke WidthOnePlugin Fields also lets you increase or decrease the stroke width using the slider control.
#
Displaying selected SVG iconDisplaying the selected SVG icon is very simple.
In your twig file, add
// entries.asset is the Craft CMS field name{{ entries.asset.render() }}
#
Rendering optionsThe render()
function accepts parameters which will be passed directly to the rendered output tag.
So for instance, the below code
// entries.asset is the Craft CMS field name{{ entries.asset.render({'class':'row-flex col-sm-3','hello':'world'}) }}
will result in
<svg src=... class='row-flex col-sm-3' hello='world'>...</svg>
Having said that, there is an exception.
Setting the height and width of the output elements inline is not a commonly preferred approach. But if you have no choice, you can pass the width and height parameters along with an extra attribute called size, value of which should be set to true.
// entries.asset is the Craft CMS field name{{ entries.asset.render({'size':true,'width':'100px','height':'100px'}) }}
will result in
<svg style='width:100px;height:100px;'>...</svg>
#
Available Twig Methodtype()
- Returns string 'svg'.
// entries.asset is the Craft CMS field name{{ entries.asset.type() }}