{"id":15288497,"url":"https://github.com/sdumetz/jekyll-inline-svg","last_synced_at":"2025-10-29T17:44:02.689Z","repository":{"id":56878642,"uuid":"100696510","full_name":"sdumetz/jekyll-inline-svg","owner":"sdumetz","description":"SVG optimizer and inliner for jekyll","archived":false,"fork":false,"pushed_at":"2025-01-02T09:37:37.000Z","size":44,"stargazers_count":40,"open_issues_count":4,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T07:07:25.791Z","etag":null,"topics":["jekyll","ruby","svg","svg-optimizer"],"latest_commit_sha":null,"homepage":null,"language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sdumetz.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}},"created_at":"2017-08-18T09:32:05.000Z","updated_at":"2025-02-02T16:15:08.000Z","dependencies_parsed_at":"2023-11-13T15:27:39.643Z","dependency_job_id":"84082e43-8ad3-4be5-9726-5af8c032acbd","html_url":"https://github.com/sdumetz/jekyll-inline-svg","commit_stats":{"total_commits":27,"total_committers":3,"mean_commits":9.0,"dds":0.07407407407407407,"last_synced_commit":"2ae146555b4d2a8f44c963cead12cfddb965a39e"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sdumetz%2Fjekyll-inline-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sdumetz%2Fjekyll-inline-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sdumetz%2Fjekyll-inline-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sdumetz%2Fjekyll-inline-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sdumetz","download_url":"https://codeload.github.com/sdumetz/jekyll-inline-svg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305934,"owners_count":20917208,"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":["jekyll","ruby","svg","svg-optimizer"],"created_at":"2024-09-30T15:49:47.483Z","updated_at":"2025-10-29T17:44:02.620Z","avatar_url":"https://github.com/sdumetz.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jekyll-inline-svg\n\nSVG optimizer and inliner for jekyll\n\nThis liquid tag will let you inline SVG images in your jekyll sites. It will add `{%svg %}` to `Liquid::Tag`.\n\n## Installation\n\nRun `gem install jekyll-inline-svg` or add `gem \"jekyll-inline-svg\", \"~\u003e0.0.1\"` to your **Gemfile**.\n\nThen in your **_config.yml** :\n\n```\ngems:\n  - jekyll-inline-svg\n```\n\nOptimization is opt-in and can be enabled by adding this to your `_config.yml`\n\n```\nsvg:\n  optimize: true\n```\n\n## Usage\n\nUse the Liquid tag in your pages :\n\n```\n    {% svg /path/to/square.svg width=24 foo=\"bar\" %}\n```\n\nJekyll will include the svg file in your output HTML like this :\n\n```\n\u003csvg width=24 foo=\"bar\" version=\"1.1\" id=\"square\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0\" y=\"0\" viewBox=\"0 0 24 24\" \u003e\n  \u003crect width=\"20\" height=\"20\" x=\"2\" y=\"2\" /\u003e\n\u003c/svg\u003e\n```\n\n**Note** : You will generally want to set the width/height of your SVG or a `style` attribute, but anything can be passed through.\n\nPaths with a space should be quoted :\n\n```\n{% svg \"/path/to/foo bar.svg\" %}\n# or :\n{% svg '/path/to/foo bar.svg' %}\n```\nOtherwise anything after the first space will be considered an attribute.\n\nLiquid variables will be interpreted if enclosed in double brackets :\n\n```\n{% assign size=40 %}\n{% svg \"/path/to/{{site.foo-name}}.svg\" width=\"{{size}}\" %}\n```\n`height` is automatically set to match `width` if omitted. It can't be left unset because IE11 won't use the viewport attribute to calculate the image's aspect ratio.\n\n\n\nRelative paths and absolute paths will both be interpreted from Jekyll's configured [source directory](https://jekyllrb.com/docs/configuration/). So both :\n\n```\n    {% svg \"/path/to/foo.svg\" %}\n    {% svg \"path/to/foo.svg\"  %}\n```\n\nShould resolve to `/your/site/source/path/to/foo.svg`. As jekyll prevents you from getting out of the source dir, `/../drawing.svg` will also resolve to `./drawing.svg`.\n\n\n## Safety\n\nIn [safe mode](https://jekyllrb.com/docs/plugins/) (ie. on github pages), the plugin will be disabled as it's not yet trusted. However it should be \"safe\" as defined by [Jekyll](https://jekyllrb.com/docs/plugins/) (ie. no arbitrary code execution).\n\nSome processing is done to remove useless data :\n\n- metadata\n- comments\n- unused groups\n- Other filters from [svg_optimizer](https://github.com/fnando/svg_optimizer)\n- default size\n\nIf any important data gets removed, or the output SVG looks different from input, it's a bug. Please file an issue to this repository describing your problem.\n\nIt does not perform any input validation on attributes. They will be appended as-is to the root node.\n\n## Motivations\n\nThis has been creeated specifically to display svg icons in html pages.\n\nPNG/BMP sprites are clearly a no go in a world where \"a screen\" can be anything from 4\" to 150\", ranging from 480p to 4k. So what are our vector alternatives?\nFont-icons are [bad](https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/). While **xlink** looks like an ideal solution, with an elegant : `\u003cuse xlink:href=\"/path/to/icons.svg#play\"\u003e\u003c/use\u003e`, it's badly supported in IE (up to ie11). And embedding SVGs in an `\u003cimg\u003e` is not going to cut it. Inlined SVG icons, in my opinion, is the best option we got right now. It's also where the industry seems to be going, with big actors like [github](https://github.com/blog/2112-delivering-octicons-with-svg) starting to transition from font-icons to inlined SVG.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsdumetz%2Fjekyll-inline-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsdumetz%2Fjekyll-inline-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsdumetz%2Fjekyll-inline-svg/lists"}