{"id":50294727,"url":"https://github.com/chrisrobison/svgencode","last_synced_at":"2026-05-28T08:04:00.050Z","repository":{"id":288982110,"uuid":"921570832","full_name":"chrisrobison/svgencode","owner":"chrisrobison","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-20T20:19:57.000Z","size":15,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-20T21:25:44.924Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chrisrobison.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-24T07:41:18.000Z","updated_at":"2025-04-20T20:20:00.000Z","dependencies_parsed_at":"2025-04-20T21:25:50.340Z","dependency_job_id":"5064f153-1c83-4b50-93c3-bce7baa350d7","html_url":"https://github.com/chrisrobison/svgencode","commit_stats":null,"previous_names":["chrisrobison/svgencode"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chrisrobison/svgencode","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisrobison%2Fsvgencode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisrobison%2Fsvgencode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisrobison%2Fsvgencode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisrobison%2Fsvgencode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisrobison","download_url":"https://codeload.github.com/chrisrobison/svgencode/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisrobison%2Fsvgencode/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33599494,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-28T02:00:06.440Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2026-05-28T08:03:58.717Z","updated_at":"2026-05-28T08:04:00.045Z","avatar_url":"https://github.com/chrisrobison.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SVG to CSS Encoder\n\n![SVG to CSS Encoder Logo](docs/images/logo.svg)\n\nA powerful, browser-based tool for encoding SVG files into CSS-ready data URIs. This lightweight utility makes it easy to embed SVG graphics directly in your CSS, reducing HTTP requests and improving website performance.\n\n## 🎯 Features\n\n- **Simple SVG Encoding**: Convert SVG code to CSS-ready `background-image` format\n- **URL Loading**: Fetch SVG files directly from URLs\n- **SVG Optimization**: Optional minification to reduce file size\n- **Quote Style Options**: Choose between single or double quotes for your CSS\n- **Live Preview**: See your encoded SVG in action with different backgrounds\n- **File Size Statistics**: Track size reduction from optimization\n- **Responsive Design**: Works on desktop and mobile devices\n- **Dark Mode Support**: Automatically adapts to your system preferences\n\n## 🚀 Live Demo\n\nTry the tool right now: [SVG to CSS Encoder](https://yourusername.github.io/svg-to-css-encoder/)\n\n![Demo Screenshot](docs/images/screenshot.png)\n\n## 💻 Usage\n\n1. Paste your SVG code into the left input area\n2. Alternatively, load an SVG from a URL\n3. The encoded SVG and CSS code will appear automatically\n4. Use the \"Copy\" buttons to copy the results to your clipboard\n5. Toggle background colors to check how your SVG looks on different backgrounds\n\n### Advanced Options\n\n- **Minify SVG**: Enable/disable SVG optimization\n- **Quote Style**: Choose between single (`'`) and double (`\"`) quotes to match your coding style\n\n## 📱 Installation\n\nNo installation required! This is a standalone web app that runs entirely in your browser. Simply clone the repository and open the `index.html` file in your web browser.\n\n```bash\ngit clone https://github.com/yourusername/svg-to-css-encoder.git\ncd svg-to-css-encoder\n# Open index.html in your browser\n```\n\n## 🛠️ Integration with Build Tools\n\nFor automated workflows, the core encoding function can be extracted and used in build tools:\n\n```javascript\nfunction encodeSVG(svg) {\n  // Add namespace if it doesn't exist\n  if (svg.indexOf('http://www.w3.org/2000/svg') \u003c 0) {\n    svg = svg.replace(/\u003csvg/g, '\u003csvg xmlns=\"http://www.w3.org/2000/svg\"');\n  }\n  \n  // Use single quotes instead of double to avoid encoding\n  svg = svg.replace(/\"/g, \"'\");\n  \n  // Compress\n  svg = svg.replace(/\u003e\\s{1,}\u003c/g, \"\u003e\u003c\");\n  svg = svg.replace(/\\s{2,}/g, \" \");\n  \n  // Encode unsafe characters\n  svg = svg.replace(/[\\r\\n%#()\u003c\u003e?\\[\\\\\\]^`{|}]/g, encodeURIComponent);\n  \n  return svg;\n}\n```\n\n## 🤝 Contributing\n\nContributions are welcome! Feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n### Development Ideas\n\n- Add file upload support\n- Implement more advanced SVG optimization options\n- Add batch processing for multiple SVGs\n- Create custom CSS output formats (SVG masks, filters, etc.)\n- Add ability to save user preferences\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🌟 Acknowledgments\n\n- Inspired by the need for efficient SVG embedding in CSS\n- Special thanks to all contributors and users who provided feedback\n\n---\n\nMade with ❤️ by [Christopher Robison](https://github.com/chrisrobison)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisrobison%2Fsvgencode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisrobison%2Fsvgencode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisrobison%2Fsvgencode/lists"}