{"id":37084665,"url":"https://github.com/rstemmer/svg2json","last_synced_at":"2026-01-14T10:23:24.793Z","repository":{"id":57679554,"uuid":"492152647","full_name":"rstemmer/svg2json","owner":"rstemmer","description":"📦 Collects a set of svg vector graphics into a single json file using data URIs","archived":false,"fork":false,"pushed_at":"2022-05-15T07:34:47.000Z","size":17,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-23T00:54:07.458Z","etag":null,"topics":["converter","json","json-data","svg","svg-files","transcoder","transcoding"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rstemmer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-14T08:09:58.000Z","updated_at":"2023-06-22T11:32:47.000Z","dependencies_parsed_at":"2022-09-11T15:22:41.521Z","dependency_job_id":null,"html_url":"https://github.com/rstemmer/svg2json","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/rstemmer/svg2json","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstemmer%2Fsvg2json","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstemmer%2Fsvg2json/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstemmer%2Fsvg2json/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstemmer%2Fsvg2json/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rstemmer","download_url":"https://codeload.github.com/rstemmer/svg2json/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstemmer%2Fsvg2json/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28417023,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-14T10:18:03.274Z","status":"ssl_error","status_checked_at":"2026-01-14T10:16:11.865Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["converter","json","json-data","svg","svg-files","transcoder","transcoding"],"created_at":"2026-01-14T10:23:23.891Z","updated_at":"2026-01-14T10:23:24.785Z","avatar_url":"https://github.com/rstemmer.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svg2json\n\nCollects a set of SVG vector graphics into a single JSON file using data URIs\n\n**This project is currently in beta stage**\n\nTODO: Motivation:\n\n- lots of small files\n- -\u003e lots of communication overhead\n- -\u003e bad UX - some icons (in browser cache) are visible, some pop up later\n\n## Dependencies\n\n- scour: https://github.com/scour-project/scour\n\n## Build and Install from Source\n\n```bash\n./pkg-build\nsudo pip install --upgrade ./dist/svg2json-0.2.0-py3-none-any.whl\n```\n\n## Install via pip\n\n```bash\npip install svg2json\n```\n\n## Usage\n\n```bash\nsvg2json --help\n```\n\n```bash\nsvg2json -o iconset.json iconset/*.svg\n```\n\n```bash\nsvg2json good.svg bad.svg \u003e status.json\n```\n\n## Example Use-Case\n\nA set of icons shall be collected and used by a web application, instead of loading each icon individually.\nThe client then should use the cached icons from the JSON file.\n\nThis example setup and the provided JavaScript code are based on\nand inspired by the [MusicDB Project](https://github.com/rstemmer/musicdb).\n\n### Server Side\n\n```bash\n# What we start with:\nls ./icons\n# Add.svg  Album.svg  AlbumFile.svg ... vMax.svg  vMin.svg  vThis.svg\nfind ./icons -type f -name \"*.svg\" -print | wc -l\n# 92 svg files\ndu -hc ./icons/*.svg\n# 592KB of data\n\n# Collecting all vector graphics into a singe JSON file:\nsvg2json -o icons.json ./icons/*.svg\n\n# The resulting JSON file\ndu -h icons.json\n# 204K - thanks to size optimization using Scour\n```\n\nExample of a generated JSON file (here: icons.json):\n```json\n{\n    \"Add\":       \"data:image/svg+xml;base64,\u003cdata\u003e\",\n    \"Album\":     \"data:image/svg+xml;base64,\u003cdata\u003e\",\n    \"AlbumFile\": \"data:image/svg+xml;base64,\u003cdata\u003e\",\n    // ...\n    \"vMax\":      \"data:image/svg+xml;base64,\u003cdata\u003e\",\n    \"vMin\":      \"data:image/svg+xml;base64,\u003cdata\u003e\",\n    \"vThis\":     \"data:image/svg+xml;base64,\u003cdata\u003e\"\n}\n```\n\n### Client side\n\nThe `IconManager` class loads the JSON file with all accumulated icons.\nKeep in mind that this happens asynchronously.\nSo right after creating an instanced of this class, the cache is empty.\nAnyway the `GetIcon` code is aware of this situation and allows loading\nicons from the server that are not yet cached.\nEither the JSON file has not been loaded or the icons are not included in the cached icon files.\n\n```javascript\n// Warning: I just hacked down this code for demonstration purpose.\n// It certainly can be improved. At least by error handling inside the LoadIcons method.\n\nclass IconManager\n{\n    constructor(fileurl=null)\n    {\n        this.iconcache = new Object();  // Empty object = empty cache\n        if(typeof fileurl === \"string\")\n            this.LoadIcons(fileurl);    // Load icons\n    }\n\n    LoadIcons(fileurl)\n    {\n        let request = new XMLHttpRequest();\n        request.addEventListener(\"load\", \n            (event)=\u003e\n            {\n                let jsonstring = event.target.responseText;\n                this.iconcache = JSON.parse(jsonstring);\n            },\n            false);\n        request.open(\"GET\", fileurl);\n        request.send();\n    }\n\n    GetIcon(iconname)\n    {\n        // If icon exists in the cache, use it.\n        // Otherwise load it from the server.\n        let uri;\n        if(iconname in this.iconcache)\n            uri = `url(${this.iconcache[iconname]})`;\n        else\n            uri = `url(\"img/icons/${iconname}.svg\")`;\n\n        // Create image element and set the icon as source\n        let icon = new Image();\n        icon.src = uri;\n        return icon;\n    }\n}\n```\n\n```javascript\nlet iconmanager = new IconManager(\"img/icons.json\");\n\n// ...\n\nlet icon_add = iconmanager.GetIcon(\"Add\");\ndocument.body.appendChild(icon_add);\n```\n\nThe shown example code comes without any dependencies despite some classes that are provided by web browsers:\n\n- [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) for loading files from the server\n- [Image](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) for creating an HTML image element (`\u003cimg\u003e`)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frstemmer%2Fsvg2json","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frstemmer%2Fsvg2json","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frstemmer%2Fsvg2json/lists"}