Create SVG Icons In SalesforceJanuary 4, 2016January 4, 2016admin
Salesforce SVG icons

Salesforce is CRM (Customer Relationship Management) product based American company, headquarters in San Francisco, California. Salesforce primarily offered and provide with a Rich-Interface for Case and Task Management, and also system synchronously routes and escalates the important actions which is events, releases. Customer portal provides customers the ability to check and track their own cases, also provides analytical tools service alerts, chat, google search, customer access and more.

Why you want to create and what is SVG

Answers is, SVG-Scalable Vector Graphics and that will scale to any size without becoming pixelated(blur), sometimes in salesforce package folder (utility-sprite folder), we would have not get icon which full fills your requirements, in the time of that case you might want to create your own icons as on your requirement.

Lightning Design System Patterns completely contain with User-Interface components, and major drawback is SVG Graphics will not support directly, to work SVG icons SF team  has done some work, so you can use SVG icons in LDS.

SLDS(Salesforce Lightning Design System) Paths is the official website to create world’s best enterprise application experiences. Design with experts to utilize SLDS Visual and interaction patterns to make user-friendly look and feel with salesforce interface experience. Here we have list of front end salesforce components, this portal may contain many things like and also completely guides you to implement components. You can see in the below code, find the path of paths.

Here is the list of SLDS Components:-
Activity Timeline, Badges, Breadcrumbs, Buttons, Button Groups, Cards, Data Tables, Datepickers, Feeds, Forms, Grid System, Icons, Images, Lookups, Media Objects, Menus, Modals, Notifications, Page Headers, Pills, Popovers, Publishers, Spinners, Tabs, Tiles, Trees.
To read more about components please go to lighting design website.

Create SVG Icons In Salesforce

SVG has three attributes — aria-hidden, class, and xlink:href — that can change.

Salesforce SVG icons