Working with SVG

SVG Icons, Logos etc.

SVG offers a lot of flexibility over traditional images being used for icons and logos. Scaling, CSS styling, maintenance to name a few. We have put into place a system that will also add bundling to the mix to reduce code in the templates themselves. I’ve broken out the two parts of the process by Designer and Developer as each need to follow steps on their part to maintain the correct process.

One goal I’d like to obtain with these SVGs is to have most access outside the SVG itself meaning as much as we can define in CSS for the image the better. This mostly affects color as we can’t access more than two colors within the SVG itself. The simple style of icons we are using for the UI refresh lends well to this and where possible only one color is needed. However the logo, for example, may involve more colors and as a result these colors will have to be defined in the SVG itself. These situations are quite fine most of the time as the goal of color choice is more a matter of useage.

Designers

This guide assumes the use of Adobe Illustrator when creating and exporting SVGs. However when exporting SVGs most apps should produce similar code.

Step 1:

Create the SVG item (guidelines for the respective element should be found in related documentation)
unless the element has multiple layers just set the color of all paths to black this is default and Illustrator won’t add a fill tag for it.

Step 2:

Prepare SVG in a text editor

For this example I’m using a simple black filled square to show the code parts:

On export choose the following:

  • Profile:  SVG 1.1
  • CSS Properties: Presentation Attributes
  • Output Fewer <tspan> elements CHECKED
  • Responsive CHECKED

you can ignore the rest

The resulting code in our example is:

to clean up the SVG first remove the first three lines completely they aren’t needed. The document should start at <svg

next change id=”Layer_1″ to id=”filled-square” or the proper name so the dev can reference it from the template.

the what’s left is:

Pro Tip – This is highly dependent on the image being created and mostly involves icons. Each shape in the SVG can have either a “stroke” or a “fill”. If one or the other is not wanted for a shape it is good practice to add on that shape a stroke=”none” or fill=”none” so that when defining the CSS styles we can apply a color to both and not worry about shapes recieving both styles. In my example of the black square I don’t want a stroke on the square so I have added stroke=”none” on the shape itself. On the CSS style now I can define like this:

and since in my SVG I have declared stroke=”none” only the fill style will show.

Now you’ll want to save this to VersionOne.Web\css\images\svg  all items in the this folder get bundled when a “rake” is run.

Now that the file is created and saved to the proper folder the rest is handled in code.

Developer

NOTE: Bundling of SVG is done when a rake task is run or you can force just svg with  “bundle exec rake generate:svg”
due to an issue with spark and the “use” element we’ve created a spark partial view to handle the quirks so you onlt need the following in your template

A few things to note above:

  • the NAME attribute points to the ID given to the svg when it was created so make sure it matches
  • the NAME attribute also acts as the default class name for the svg for styling. additionally you can add the attribute cssClass to add additional classes
  • The title attribute is for accessibility so include it where appropriate.

now the styling for the item is dependent on useage but here’s an example with the black square:

Placement info would be dependent on where the icon is displayed and added in as needed.

And that’s it! I’ll update this doc if any info need be updated.

Leave a Reply

Your email address will not be published. Required fields are marked *