{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreienutbb53eja5dicr2mpzszclcrwrk4rf5746eufxfx6gjf5i7e7e",
    "uri": "at://did:plc:6dmfe46c76jjenq3kaxc5eds/app.bsky.feed.post/3mfsgyyaf64r2"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreify2uwpjivmuaeqp3vvwy2zf7ieyvjqk2gj3s7yfohbzq7e3qxnwq"
    },
    "mimeType": "image/svg+xml",
    "size": 163665
  },
  "path": "/blog/logo-design",
  "publishedAt": "2026-02-23T00:00:00.000Z",
  "site": "https://pavanportfolio.droptools.site",
  "tags": [
    "Inkscape Official Documentation",
    "SVG Optimization Guide by CSS-Tricks",
    "SVGO GitHub Repository",
    "MDN SVG Tutorial",
    "Inkscape Export Options",
    "Base64 Encoding and SVG Performance",
    "KDE Visual Design Group"
  ],
  "textContent": "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.\n\nHere's how I designed the logos and brought them down to a reasonable file size.\n\n## The Design Process\n\nI used Inkscape 1.4.2 to create both logos with a consistent visual identity:\n\n  * **Mankala Next Gen Logo** (`logo.svg`): A 48mm × 48mm design featuring a blue gradient (#3d49e9 to #73d5ff) with embedded texture patterns\n  * **Mankala Engine Logo** (`mankalaengine-v2.svg`): A companion logo with similar styling but distinct visual elements to represent the backend engine\n\n\n\nBoth logos started with:\n\n  * Gradient fills for depth and modern aesthetics\n  * Embedded raster textures for visual interest\n  * Rounded rectangles with 1.32mm corner radius\n  * Shadow effects using gradient overlays\n\n\n\n## The 5MB Problem\n\nAfter 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.\n\nThe 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.\n\n## Optimization Techniques\n\nHere's how I reduced the file size while maintaining visual quality:\n\n### 1. Texture Simplification\n\nThe embedded textures were 266×266px PNG images with full color data. I:\n\n  * Reduced texture resolution where possible\n  * Converted to grayscale patterns\n  * Used SVG patterns instead of full raster images when feasible\n\n\n\n### 2. Gradient Optimization\n\nInstead of complex gradient meshes, I used simple linear gradients:\n\n\n    <linearGradient id=\"linearGradient1\">\n    <stop style=\"stop-color:#3d49e9;stop-opacity:1;\" offset=\"0\" />\n    <stop style=\"stop-color:#73d5ff;stop-opacity:1;\" offset=\"1\" />\n    </linearGradient>\n\n\n### 3. Removing Unnecessary Metadata\n\nInkscape adds extensive metadata to SVGs. I cleaned up:\n\n  * Sodipodi-specific attributes\n  * Inkscape namespaces that aren't needed for rendering\n  * Hidden layers and unused definitions\n\n\n\n### 4. Pattern Reuse\n\nBoth logos share similar pattern definitions. By referencing the same pattern with different transforms, I avoided duplicating the base64 data:\n\n\n    <pattern id=\"pattern1\" ...>\n    <image xlink:href=\"data:image/png;base64,...\" />\n    </pattern>\n    <pattern id=\"pattern2\" xlink:href=\"#pattern1\"\n    patternTransform=\"matrix(...)\" />\n\n\n## The Results\n\nAfter optimization:\n\n  * File sizes reduced from 5MB+ to manageable sizes\n  * Logos remain crisp at all resolutions (vector benefits)\n  * Load times improved dramatically for web use\n  * Visual quality maintained\n\n\n\n## Lessons Learned\n\n  1. **Be cautious with embedded rasters** : Inkscape makes it easy to embed images, but consider linking external files or using pure vector alternatives\n  2. **Export settings matter** : Use \"Optimized SVG\" export option in Inkscape\n  3. **Test file sizes early** : Don't wait until the end to check your SVG file size\n  4. **Gradients over textures** : Simple gradients often look just as good as complex textures\n  5. **Reuse definitions** : SVG's `<defs>` section is powerful for reducing duplication\n\n\n\n## Tools Used\n\n  * **Inkscape 1.4.2** : Primary design tool\n  * **Text editor** : For manual SVG cleanup and optimization\n  * **SVGO** : Command-line tool for automated SVG optimization (optional)\n\n\n\nThe final logos now serve as the visual identity for both the Mankala game and its engine, with file sizes appropriate for modern web development.\n\n## References & Further Reading\n\n  * Inkscape Official Documentation - Comprehensive guide to Inkscape features\n  * SVG Optimization Guide by CSS-Tricks - Deep dive into SVG optimization techniques\n  * SVGO GitHub Repository - Automated SVG optimization tool\n  * MDN SVG Tutorial - Learn SVG fundamentals\n  * Inkscape Export Options - Guide to optimized SVG exports\n  * Base64 Encoding and SVG Performance - Understanding the performance impact of embedded images\n  * KDE Visual Design Group - Design guidelines for KDE projects\n\n",
  "title": "Designing Mankala Logos"
}