{"id":13682280,"url":"https://github.com/cloudfour/simple-svg-placeholder","last_synced_at":"2025-05-15T20:07:18.294Z","repository":{"id":37048590,"uuid":"231644245","full_name":"cloudfour/simple-svg-placeholder","owner":"cloudfour","description":"A very simple placeholder image generator with zero dependencies.","archived":false,"fork":false,"pushed_at":"2025-05-06T03:55:12.000Z","size":702,"stargazers_count":180,"open_issues_count":2,"forks_count":9,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-05-14T19:06:28.865Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cloudfour.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2020-01-03T18:36:02.000Z","updated_at":"2025-05-06T03:54:38.000Z","dependencies_parsed_at":"2023-02-16T14:16:10.571Z","dependency_job_id":"9924c13e-fb23-4acd-94f9-75387380b6a3","html_url":"https://github.com/cloudfour/simple-svg-placeholder","commit_stats":{"total_commits":217,"total_committers":6,"mean_commits":"36.166666666666664","dds":0.5345622119815668,"last_synced_commit":"f7a42368ca64fc66dc1dbcab77ea0fc4bd4167af"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudfour%2Fsimple-svg-placeholder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudfour%2Fsimple-svg-placeholder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudfour%2Fsimple-svg-placeholder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudfour%2Fsimple-svg-placeholder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudfour","download_url":"https://codeload.github.com/cloudfour/simple-svg-placeholder/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254414499,"owners_count":22067272,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":"2024-08-02T13:01:43.380Z","updated_at":"2025-05-15T20:07:13.234Z","avatar_url":"https://github.com/cloudfour.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Simple SVG Placeholder\n\n[![NPM version](https://img.shields.io/npm/v/@cloudfour/simple-svg-placeholder.svg)](https://www.npmjs.com/package/@cloudfour/simple-svg-placeholder) [![Build Status](https://github.com/cloudfour/simple-svg-placeholder/workflows/CI/badge.svg)](https://github.com/cloudfour/simple-svg-placeholder/actions?query=workflow%3ACI) [![Renovate](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com)\n\n\u003e A very simple placeholder image generator with zero dependencies. Returns a data URI (or raw SVG source) as a string for use in templates.\n\n## Getting Started\n\nThe package is available to install via npm:\n\n```\nnpm i --save @cloudfour/simple-svg-placeholder\n```\n\nOnce installed, you may import the function as an ES or CommonJS module:\n\n```javascript\n// Module\nimport simpleSvgPlaceholder from '@cloudfour/simple-svg-placeholder';\n\n// CommonJS\nconst simpleSvgPlaceholder = require('@cloudfour/simple-svg-placeholder');\n```\n\nThen call the function to generate placeholder SVGs:\n\n```javascript\nconst placeholder = simpleSvgPlaceholder(/* options */);\n// =\u003e 'data:image/svg+xml;...'\n```\n\n## Examples\n\n### Default\n\n![](./examples/default.svg?sanitize=true)\n\n```javascript\nsimpleSvgPlaceholder();\n```\n\n### Dimensions\n\n![](./examples/size.svg?sanitize=true)\n\n```javascript\nsimpleSvgPlaceholder({\n  width: 180,\n  height: 135,\n});\n```\n\n### Text\n\n![](./examples/text.svg?sanitize=true)\n\n```javascript\nsimpleSvgPlaceholder({\n  text: 'Hello world!',\n});\n```\n\n### Colors\n\n![](./examples/color.svg?sanitize=true)\n\n```javascript\nsimpleSvgPlaceholder({\n  bgColor: '#0F1C3F',\n  textColor: '#7FDBFF',\n});\n```\n\n### Font\n\n![](./examples/font.svg?sanitize=true)\n\n```javascript\nsimpleSvgPlaceholder({\n  fontFamily: 'Georgia, serif',\n  fontWeight: 'normal',\n});\n```\n\n## Option Reference\n\n### width `{Number}`\n\nDefaults to `300`, the default width of SVG elements in most browsers.\n\n### height `{Number}`\n\nDefaults to `150`, the default height of SVG elements in most browsers.\n\n### text `{String}`\n\nThe text to display. Defaults to the image dimensions.\n\n### fontFamily `{String}`\n\nThe font to use for the text. For data URIs, this needs to be a system-installed font. Defaults to `'sans-serif'`.\n\n### fontWeight `{String}`\n\nDefaults to `'bold'`.\n\n### fontSize `{Number}`\n\nDefaults to 20% of the shortest image dimension, rounded down.\n\n### dy `{Number}`\n\nAdjustment applied to [the `dy` attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dy) of the text element so it will appear vertically centered. Defaults to 35% of the `fontSize`.\n\n### bgColor `{String}`\n\nThe background color of the image. Defaults to `#ddd`.\n\n### textColor `{String}`\n\nThe color of the text. For transparency, use an `rgba` or `hsla` color value. Defaults to `rgba(0,0,0,0.5)`.\n\n### dataUri `{Boolean}`\n\nIf `true`, the function will return an encoded string for use as an `img` element's `src` value. If `false`, the function will return the unencoded SVG source. Defaults to `true`.\n\n### charset `{String}`\n\nDefaults to `UTF-8`, but if your source HTML document's character set is different, you may want to update this to match.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudfour%2Fsimple-svg-placeholder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudfour%2Fsimple-svg-placeholder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudfour%2Fsimple-svg-placeholder/lists"}