Online Editor to Change the Look of Your SVGs

SVG has been rapidly increasing in popularity, with SVG icons, fonts, inline SVG, SVG styling, and JS/CSS3 animation of SVGs. All great examples of smart SVG use. Aside from its responsiveness and animation features, SVG can take design to a whole new level.

Using a newly-developed editor, we’ll show you how any vector can be made customizable. The editor is still experimental, so it cannot be integrated here, but we’ll walk you through the process and illustrate this post with a sporty little swimmer (credit for the design goes to Lisandro Trepeu).

1.Draw your vector

The first step is to design your illustration in your favorite graphical editor.

2.Export as SVG

Once you’re done, you’ll need to save your illustration as an SVG.

You can keep the export settings to the standard SVG 1.1 format. The only setting that will affect the way you work with your SVG is “CSS Properties”. You have two options: you can either select “style elements” (which will add CSS classes on top of your SVG) or you can choose “style attributes” (to style each element separately). The choice depends mainly on how you’ve built up your design and how you want to link variables to it.

You can then open your .svg file using a code/text editor to see what’s inside:

A good exercise is to try to identify elements of your design by looking at the code. In our case, the elements are pretty easy to find with only <path> elements and id’s (names are automatically taken from the layers): swimsuit, goggles and cap.

Once we’ve pasted the code into our text editor, you’ll notice a “clean SVG” button in the upper right corner. This button was added to automatically remove useless metadata and prepare your SVG for customization (it’s based on SVGO). The way your SVG appears on screen depends on the original artboard in your graphical editor. If it doesn’t display well, you can still adjust the viewbox values: viewBox="0 0 1024 1024".

3. Style your SVG

Now you’re ready for the actual customization. The good news is that you can style pretty much anything in your illustration from color to text, position and visibility.

Let’s turn Michael into a Speckyboy swimmer. To do so, we’ll change several things:

• Change the color of the swimsuit, glasses and logo from purple to #587898 blue;


• Hide the swimming goggles;


• Put “Speckyboy” on his swim cap

This will be done inside the editor, so we need UX controls to interact with our mouse: we’ll simply add a color picker, a boolean, and a text input.

The editor to style the SVG is right next to the SVG and is called CSS, because of it’s similarities with its HTML counterpart.

Elements from the SVG need to be linked to the UX controls to make them customizable. As with most styling languages, this comprises two steps:

1. Selecting the ID element using # (e.g. #hat1) (or alternatively using classes);


2. Applying a method to the element (e.g. ‘fill’, ‘visible’ or ‘text-content’);

The $name is a reference to the UX control we have defined above.

The controls should now be linked to the illustration and you should be able to customize the illustration. Here’s our Speckyboy Swimmer:

You can find the full customization code and play with the Speckyboy swimmer here.

The tutorial above can be done for any vector image. You can get access to the editor and illustrio platform here.

Online editor to change the look of your SVGs.

The post Online Editor to Change the Look of Your SVGs appeared first on Speckyboy Web Design Magazine.

No related posts.

Online Editor to Change the Look of Your SVGs