Using Inkscape to create SVG Files for Background of Event Badges in Badgeyay
Inkscape is a free and open-source vector graphics editor. I used it in the FOSSASIA Badgeyay repository whose main purpose is to create badges for the event created using open-event. Badges were created in Scalable Vector Graphics (SVG) because of its advantages over JPEG, png etc. such as: scalability, Search Engine Optimization (SEO) friendly, easy editing ability (as it gets saved in an XML format) and resolution independence.
My task (issue #20) was to create the background in SVG format so that it can be edited using XML file. Aim was to create the background in such a way so that we just have to find and replace the color code to see the color change in the image/background. Following background was to be reproduced in SVG format using Inkscape whose color can be edited using a text editor.
This was achieved using Inkscape (as suggested in the issue itself) which let us create an SVG file. I created 2 layers, 1 for plain background, and the other containing the triangles of Voronoi Diagram. General steps are included in this awesome video tutorial – AbstractBackground.
I found this quite helpful in understanding the interface of Inkscape. After following this tutorial, I had to do changes as follows:
- Layer 1 rectangle was made using mesh, giving 4 different colors at corners. I set these colors as grey with different opacity/alpha factor.
- Then just like in the video, I created a small circular object, set it to ‘path to object’, made duplicates of them, scattered them on the rectangle of 1st layer.
- Used extensions menu to use ‘voronoi diagram‘, and then applied this to the selected circles.
- Then I removed these circles, ungrouped all the triangles formed , changed their color, just by picking with the background (which was grey — with different opacities!). Grouped them together again, removed the lines which were separating the triangles by setting stroke to none.
- Now all one have to do is change the color of 1st layer’ rectangle, and the final image/background will get changed .
This change of color can be changed using a text editor too. I just had to find layer 1 rectangle in the XML tree, replace the ‘fill’ attribute with the required color code.
This was achieved using INKSCAPE.
Now using text editor (here Sublime Text 3) , find layer 1, and change ‘fill’ value of rect with say ‘37C871’.
<g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" style="display:inline;opacity:1"> <rect id="rect4504" width="141.3569" height="200.82413" x="-63.25676" y="-14.052279" style="opacity:1;fill:#37C871;fill-opacity:1;stroke:url(#linearGradient2561);stroke-width:0.57644272" /> </g>
Then again opening the svg file, gives us the output as :
Results can be seen in my Pull request #152 which eventually got merged.
Using the similar background and adding logo of FOSSASIA on the top, also adding editable Headings like ‘VIP’, ‘BUSINESS PASS’ was done further in #PR167.
If you want to contribute to FOSSASIA/badgeyay, you can create an issue here.
- AbstractBackground: For creating such type of backgrounds.
- Nick Saporito: His videos are mostly about ‘Inkscape’.