External Publication
Visit Post

Designing Mankala Logos

Planet KDE [Unofficial] February 23, 2026
Source

While working on the Mankala Next Gen project for Season of KDE, I needed to create two distinct logos: one for the game itself and another for the mankalaengine backend. What started as a straightforward design task in Inkscape quickly became a lesson in SVG optimization when my initial exports ballooned to over 5MB.

Here's how I designed the logos and brought them down to a reasonable file size.

The Design Process

I used Inkscape 1.4.2 to create both logos with a consistent visual identity:

  • Mankala Next Gen Logo (logo.svg): A 48mm × 48mm design featuring a blue gradient (#3d49e9 to #73d5ff) with embedded texture patterns
  • Mankala Engine Logo (mankalaengine-v2.svg): A companion logo with similar styling but distinct visual elements to represent the backend engine

Both logos started with:

  • Gradient fills for depth and modern aesthetics
  • Embedded raster textures for visual interest
  • Rounded rectangles with 1.32mm corner radius
  • Shadow effects using gradient overlays

The 5MB Problem

After my initial export, I was shocked to see the SVG files were over 5MB each. For what should be simple vector graphics, this was completely unacceptable for web use.

The culprit? Embedded PNG textures encoded as base64 data URLs directly in the SVG. While Inkscape makes it easy to embed raster images into vector files, it comes at a massive file size cost.

Optimization Techniques

Here's how I reduced the file size while maintaining visual quality:

1. Texture Simplification

The embedded textures were 266×266px PNG images with full color data. I:

  • Reduced texture resolution where possible
  • Converted to grayscale patterns
  • Used SVG patterns instead of full raster images when feasible

2. Gradient Optimization

Instead of complex gradient meshes, I used simple linear gradients:

<linearGradient id="linearGradient1">
<stop style="stop-color:#3d49e9;stop-opacity:1;" offset="0" />
<stop style="stop-color:#73d5ff;stop-opacity:1;" offset="1" />
</linearGradient>

3. Removing Unnecessary Metadata

Inkscape adds extensive metadata to SVGs. I cleaned up:

  • Sodipodi-specific attributes
  • Inkscape namespaces that aren't needed for rendering
  • Hidden layers and unused definitions

4. Pattern Reuse

Both logos share similar pattern definitions. By referencing the same pattern with different transforms, I avoided duplicating the base64 data:

<pattern id="pattern1" ...>
<image xlink:href="data:image/png;base64,..." />
</pattern>
<pattern id="pattern2" xlink:href="#pattern1"
patternTransform="matrix(...)" />

The Results

After optimization:

  • File sizes reduced from 5MB+ to manageable sizes
  • Logos remain crisp at all resolutions (vector benefits)
  • Load times improved dramatically for web use
  • Visual quality maintained

Lessons Learned

  1. Be cautious with embedded rasters : Inkscape makes it easy to embed images, but consider linking external files or using pure vector alternatives
  2. Export settings matter : Use "Optimized SVG" export option in Inkscape
  3. Test file sizes early : Don't wait until the end to check your SVG file size
  4. Gradients over textures : Simple gradients often look just as good as complex textures
  5. Reuse definitions : SVG's <defs> section is powerful for reducing duplication

Tools Used

  • Inkscape 1.4.2 : Primary design tool
  • Text editor : For manual SVG cleanup and optimization
  • SVGO : Command-line tool for automated SVG optimization (optional)

The final logos now serve as the visual identity for both the Mankala game and its engine, with file sizes appropriate for modern web development.

References & Further Reading

  • Inkscape Official Documentation - Comprehensive guide to Inkscape features
  • SVG Optimization Guide by CSS-Tricks - Deep dive into SVG optimization techniques
  • SVGO GitHub Repository - Automated SVG optimization tool
  • MDN SVG Tutorial - Learn SVG fundamentals
  • Inkscape Export Options - Guide to optimized SVG exports
  • Base64 Encoding and SVG Performance - Understanding the performance impact of embedded images
  • KDE Visual Design Group - Design guidelines for KDE projects

Discussion in the ATmosphere

Loading comments...