{"id":19365172,"url":"https://github.com/jorgeatgu/svg-snippets","last_synced_at":"2026-01-29T18:44:34.505Z","repository":{"id":69302317,"uuid":"22077102","full_name":"jorgeatgu/SVG-Snippets","owner":"jorgeatgu","description":":beginner: A set of custom SVG snippets for Sublime Text 2/3","archived":false,"fork":false,"pushed_at":"2016-11-16T21:49:12.000Z","size":263,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-08T11:50:43.665Z","etag":null,"topics":["sublime-settings","sublime-text","svg"],"latest_commit_sha":null,"homepage":"","language":null,"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/jorgeatgu.png","metadata":{"files":{"readme":"README.md","changelog":"changelog/0.2.0.txt","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}},"created_at":"2014-07-21T19:22:18.000Z","updated_at":"2020-11-21T15:20:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"a69d9451-a025-4728-a94b-946df2ea4439","html_url":"https://github.com/jorgeatgu/SVG-Snippets","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/jorgeatgu/SVG-Snippets","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorgeatgu%2FSVG-Snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorgeatgu%2FSVG-Snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorgeatgu%2FSVG-Snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorgeatgu%2FSVG-Snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jorgeatgu","download_url":"https://codeload.github.com/jorgeatgu/SVG-Snippets/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorgeatgu%2FSVG-Snippets/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28882326,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-29T16:41:59.663Z","status":"ssl_error","status_checked_at":"2026-01-29T16:39:39.641Z","response_time":59,"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":["sublime-settings","sublime-text","svg"],"created_at":"2024-11-10T07:39:20.777Z","updated_at":"2026-01-29T18:44:34.490Z","avatar_url":"https://github.com/jorgeatgu.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"SVG-Snippets\n============\n\nType the snippet shortcode and then press `Tab` to complete the snippet.\n\nThe snippets are listed below in alphabetical order. The `'$1'` indicates the position of the caret/s. Some snippets have been set up so that pressing Tab jumps the caret/s to the next predefined spot. It's a little hard to explain, but any snippet that has a `$1/$2/$3/etc. uses this technique.\n\n#[Package Control](https://packagecontrol.io/packages/SVG-Snippets)\n#[CodePen](http://codepen.io/jorgeatgu/blog/svg-snippets)\n[![Video Vimeo](https://github.com/jorgeatgu/SVG-Snippets/blob/master/vimeo-image.png)](https://vimeo.com/101490820)\n\n##Circle\n\nWrite ```circle```\n\n```html\n/* after */\n\n\u003ccircle r=\"$1\" cx=\"$2\" cy=\"$3\" fill=\"$4\" stroke=\"$5\" stroke-width=\"$6\"/\u003e\n```\n\nWrite ```circle3```\n\n```html\n\n/* after */\n\n\u003ccircle r=\"$1\" cx=\"$2\" cy=\"$3\" fill=\"$4\" stroke=\"$5\" stroke-width=\"$6\"/\u003e\n\u003ccircle r=\"$1\" cx=\"$2\" cy=\"$3\" fill=\"$4\" stroke=\"$5\" stroke-width=\"$6\"/\u003e\n\u003ccircle r=\"$1\" cx=\"$2\" cy=\"$3\" fill=\"$4\" stroke=\"$5\" stroke-width=\"$6\"/\u003e\n```\n\nWrite ```circleu```\n\n```html\n\n/* after */\n\n\u003cdefs\u003e\n\t\u003ccircle id=\"$1\" r=\"$2\" cx=\"$3\" cy=\"$4\" fill=\"$5\" stroke=\"$6\" stroke-width=\"$7\"/\u003e\n\u003c/defs\u003e\n\n\u003cuse xlink:href=\"#$8\"/\u003e\n\u003cuse xlink:href=\"#$8\" x=\"$9\" y=\"$10\"/\u003e\n```\n\n##Clippath\n\nWrite ```clippath```\n\n```html\n\n/* after */\n\n\u003cdefs\u003e\n\t\u003cclipPath id=\"$1\"\u003e\n\t\t$2\n\t\u003c/clipPath\u003e\n\u003c/defs\u003e\n```\n\n###Defs + use\n\nWrite ```defsuse```\n\n```html\n\n/* after */\n\n\u003cdefs\u003e\n\n\u003c/defs\u003e\n\n\u003cuse xlink:href=\"#$1\"/\u003e\n\u003cuse xlink:href=\"#$1\" x=\"$2\" y=\"$3\"/\u003e\n```\n\n##Ellipse\n\nWrite ```ellipse```\n\n```html\n\n/* after */\n\n\u003cellipse rx=\"$1\" ry=\"$2\" cx=\"$3\" cy=\"$4\" fill=\"$5\" stroke=\"$6\" stroke-width=\"$7\"/\u003e\n```\n\nWrite ```ellipse3```\n\n```html\n\n/* after */\n\n\u003cellipse rx=\"$1\" ry=\"$2\" cx=\"$3\" cy=\"$4\" fill=\"$5\" stroke=\"$6\" stroke-width=\"$7\"/\u003e\n\u003cellipse rx=\"$1\" ry=\"$2\" cx=\"$3\" cy=\"$4\" fill=\"$5\" stroke=\"$6\" stroke-width=\"$7\"/\u003e\n\u003cellipse rx=\"$1\" ry=\"$2\" cx=\"$3\" cy=\"$4\" fill=\"$5\" stroke=\"$6\" stroke-width=\"$7\"/\u003e\n```\n\nWrite ```ellipseu```\n\n```html\n\n/* after */\n\n\u003cdefs\u003e\n\t\u003cellipse id=\"$1\" rx=\"$2\" ry=\"$3\" cx=\"$4\" cy=\"$5\" fill=\"$6\" stroke=\"$7\" stroke-width=\"$8\"/\u003e\n\u003c/defs\u003e\n\n\u003cuse xlink:href=\"#$9\" /\u003e\n\u003cuse xlink:href=\"#$9\" x=\"$10\" y=\"$11\"/\u003e\n```\n\n##Group\n\nWrite ```group```\n\n```html\n\n/* after */\n\n\u003cg id=\"$1\"\u003e\n\n\t$2\n\n\u003c/g\u003e\n```\n\n##Line\n\nWrite ```line```\n\n```html\n\n/* after */\n\n\u003cline x1=\"$1\" y1=\"$2\" x2=\"$3\" y2=\"$4\" stroke=\"$5\" stroke-width=\"$6\"/\u003e\n```\n\nWrite ```lineu```\n\n```html\n\n/* after */\n\n\u003cdefs\u003e\n\t\u003cline x1=\"$1\" y1=\"$2\" x2=\"$3\" y2=\"$4\" stroke=\"$5\" stroke-width=\"$6\"/\u003e\n\u003c/defs\u003e\n\n\u003cuse xlink:href=\"#$7\" /\u003e\n\u003cuse xlink:href=\"#$7\" x=\"$8\" y=\"$9\"/\u003e\n```\n\n##Lineargradient\n\nWrite ```lineargradient```\n\n```html\n\n/* after */\n\n\u003clinearGradient id=\"$1\" gradientUnits=\"objectBoundingBox\"\u003e\n\t\u003cstop offset=\"$2\" stop-color=\"$3\"/\u003e\n\t\u003cstop offset=\"$4\" stop-color=\"$5\"/\u003e\n\u003c/linearGradient\u003e\n```\n\n##Matrix\n\nWrite ```matrix```\n\n```html\n\n/* after */\n\ntransform=\"matrix($1 $2 $3 $4 $5 $6)\"\n```\n\n##Path\n\nWrite ```path```\n\n```html\n\n/* after */\n\n\u003cpath d=\"$1\" stroke-width=\"$2\" stroke=\"$3\" fill=\"$4\"/\u003e\n```\n\n##Pattern\n\nWrite ```pattern```\n\n```html\n\n/* after */\n\n\u003cdefs\u003e\n\t\u003cpattern id=\"$1\" width=\"$2\" height=\"$3\" patternUnits=\"userSpaceOnUse\"\u003e\n\t\t$4\n\t\u003c/pattern\u003e\n\u003c/defs\u003e\n```\n\n##Polygon\n\nWrite ```polygon```\n\n```html\n\n/* after */\n\n\u003cpolygon points=\"$1\" fill=\"$2\" stroke=\"$3\" stroke-width=\"$4\"/\u003e\n```\n\nWrite ```polygon3```\n\n```html\n\n/* after */\n\n\u003cpolygon points=\"$1\" fill=\"$2\" stroke=\"$3\" stroke-width=\"$4\"/\u003e\n\u003cpolygon points=\"$1\" fill=\"$2\" stroke=\"$3\" stroke-width=\"$4\"/\u003e\n\u003cpolygon points=\"$1\" fill=\"$2\" stroke=\"$3\" stroke-width=\"$4\"/\u003e\n```\n\nWrite ```polygonu```\n\n```html\n\n/* after */\n\n\u003cdefs\u003e\n\t\u003cpolygon points=\"$1\" fill=\"$2\" stroke=\"$3\" stroke-width=\"$4\"/\u003e\n\u003c/defs\u003e\n\n\u003cuse xlink:href=\"#$7\" /\u003e\n\u003cuse xlink:href=\"#$7\" x=\"$8\" y=\"$9\"/\u003e\n```\n\n##Polyline\n\nWrite ```polyline```\n\n```html\n\n/* after */\n\n\u003cpolyline points=\"$1\" fill=\"$2\" stroke=\"$3\" stroke-width=\"$4\"/\u003e\n```\n\nWrite ```polyline3```\n\n```html\n\n/* after */\n\n\u003cpolyline points=\"$1\" fill=\"$2\" stroke=\"$3\" stroke-width=\"$4\"/\u003e\n\u003cpolyline points=\"$1\" fill=\"$2\" stroke=\"$3\" stroke-width=\"$4\"/\u003e\n\u003cpolyline points=\"$1\" fill=\"$2\" stroke=\"$3\" stroke-width=\"$4\"/\u003e\n```\n\nWrite ```polylineu```\n\n```html\n\n/* after */\n\n\u003cdefs\u003e\n\t\u003cpolyline id=\"$1\" points=\"$2\" fill=\"$3\" stroke=\"$4\" stroke-width=\"$5\"/\u003e\n\u003c/defs\u003e\n\n\u003cuse xlink:href=\"#$6\"/\u003e\n\u003cuse xlink:href=\"#$6\" x=\"$7\" y=\"$8\"/\u003e\n```\n\n##Radialgradient\n\nWrite ```radialgradient```\n\n```html\n\n/* after */\n\n\u003cradialGradient id=\"$1\" gradientUnits=\"objectBoundingBox\"\u003e\n\t\u003cstop offset=\"$2\" stop-color=\"$3\"/\u003e\n\t\u003cstop offset=\"$4\" stop-color=\"$5\"/\u003e\n\u003c/radialGradient\u003e\n```\n\n##Rect\n\nWrite ```rect```\n\n```html\n\n/* after */\n\n\u003crect x=\"$1\" y=\"$2\" width=\"$3\" height=\"$4\" fill=\"$5\" stroke=\"$6\" stroke-width=\"$7\"/\u003e\n```\n\n##Rect3\n\nWrite ```rect3```\n\n```html\n\n/* after */\n\n\u003crect x=\"$1\" y=\"$2\" width=\"$3\" height=\"$4\" fill=\"$5\" stroke=\"$6\" stroke-width=\"$7\"/\u003e\n\u003crect x=\"$1\" y=\"$2\" width=\"$3\" height=\"$4\" fill=\"$5\" stroke=\"$6\" stroke-width=\"$7\"/\u003e\n\u003crect x=\"$1\" y=\"$2\" width=\"$3\" height=\"$4\" fill=\"$5\" stroke=\"$6\" stroke-width=\"$7\"/\u003e\n```\n\n##Rectu\n\nWrite ```rectu```\n\n```html\n\n/* after */\n\n\u003cdefs\u003e\n\t\u003crect id=\"$1\" x=\"$2\" y=\"$3\" width=\"$4\" height=\"$5\" fill=\"$6\" stroke=\"$7\" stroke-width=\"$8\"/\u003e\n\u003c/defs\u003e\n\n\u003cuse xlink:href=\"#$9\"/\u003e\n\u003cuse xlink:href=\"#$9\" x=\"$10\" y=\"$11\"/\u003e\n```\n\n##Rotate\n\nWrite ```rotate```\n\n```html\n\n/* after */\n\ntransform=\"rotate($1)\"\n```\n\n##Scalable\n\nWrite ```scalable```\n\n```html\n\n/* after */\n\n\u003csvg xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tviewBox=\"$1\" width=\"$2\" height=\"$3\" aria-labelledby=\"title desc\"\u003e\n\n\t\t\t\t\u003ctitle id=\"title\"\u003e$4\u003c/title\u003e\n                \u003cdesc id=\"desc\"\u003e$5\u003c/desc\u003e\n\n\u003c/svg\u003e\n```\n\n##Scalableu\n\nWrite ```scalableu```\n\n```html\n\n/* after */\n\n\u003csvg xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tviewBox=\"$1\" width=\"$2\" height=\"$3\" aria-labelledby=\"title desc\"\u003e\n\n\t\t\t\t\u003ctitle id=\"title\"\u003e$4\u003c/title\u003e\n                \u003cdesc id=\"desc\"\u003e$5\u003c/desc\u003e\n\n                \u003cdefs\u003e\n\n\n\n                \u003c/defs\u003e\n\n\n                \u003cuse xlink:href=\"#\" x=\"\" y=\"\"/\u003e\n\n\u003c/svg\u003e\n```\n\n\n##SkewX\n\nWrite ```skewx```\n\n```html\n\n/* after */\n\ntransform=\"skewX($1)\"\n```\n\n##SkewY\n\nWrite ```skewy```\n\n```html\n\n/* after */\n\ntransform=\"skewY($1)\"\n```\n\n##Symbol\n\nWrite ```symbol```\n\n```html\n\n/* after */\n\n\u003csymbol id=\"$1\"\u003e\n\n\u003c/symbol\u003e\n\u003cuse xlink:href=\"#$1\"/\u003e\n\u003cuse xlink:href=\"#$1\" x=\"$2\" y=\"$3\"/\u003e\n```\n\n##Text\n\nWrite ```text```\n\n```html\n\n/* after */\n\n\u003ctext x=\"$1\" y=\"$2\" fill=\"$3\"\u003e$4\u003c/text\u003e\n```\n\n##Translate\n\nWrite ```translate```\n\n```html\n\n/* after */\n\ntransform=\"translate($1)\"\n```\n\n##Tspan\n\nWrite ```tspan```\n\n```html\n\n/* after */\n\n\u003ctspan fill=\"$1\" x=\"$2\" y=\"$3\"\u003e$4\u003c/tspan\u003e\n```\n\n##Use\n\nWrite ```use```\n\n```html\n\n/* after */\n\n\u003cuse xlink:href=\"#$1\" x=\"$2\" y=\"$3\"/\u003e\n```\n\n##Use3\n\nWrite ```use3```\n\n```html\n\n/* after */\n\n\u003cuse xlink:href=\"#$1\"/\u003e\n\u003cuse xlink:href=\"#$1\" x=\"$2\" y=\"$3\"/\u003e\n\u003cuse xlink:href=\"#$1\" x=\"$4\" y=\"$5\"/\u003e\n```\n\n##Scalable with Inverted Y-Axis\n\nWrite ```scalablei```\n\n```html\n\n/* after */\n\n\u003csvg xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"$1 $2 $3 $4\" width=\"$5\" height=\"$6\" aria-labelledby=\"title desc\"\u003e\n        \u003ctitle id=\"title\"\u003e$7\u003c/title\u003e\n        \u003cdesc id=\"desc\"\u003e$8\u003c/desc\u003e\n        \u003cg transform=\"translate(0,$4) scale(1,-1)\"\u003e\n            ${9:\u003c!-- content --\u003e}\n        \u003c/g\u003e\n\n\u003c/svg\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjorgeatgu%2Fsvg-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjorgeatgu%2Fsvg-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjorgeatgu%2Fsvg-snippets/lists"}