{"id":16347424,"url":"https://github.com/cuth/svg-allthethings","last_synced_at":"2025-11-09T02:30:36.670Z","repository":{"id":19237849,"uuid":"22472684","full_name":"cuth/svg-allthethings","owner":"cuth","description":"Learn, practice and test SVG","archived":false,"fork":false,"pushed_at":"2014-08-06T17:26:45.000Z","size":792,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"gh-pages","last_synced_at":"2024-12-28T06:12:00.935Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/cuth.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}},"created_at":"2014-07-31T14:42:28.000Z","updated_at":"2023-03-04T06:01:35.000Z","dependencies_parsed_at":"2022-08-01T03:37:58.776Z","dependency_job_id":null,"html_url":"https://github.com/cuth/svg-allthethings","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuth%2Fsvg-allthethings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuth%2Fsvg-allthethings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuth%2Fsvg-allthethings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuth%2Fsvg-allthethings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cuth","download_url":"https://codeload.github.com/cuth/svg-allthethings/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239565663,"owners_count":19660158,"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-10-11T00:42:20.369Z","updated_at":"2025-11-09T02:30:36.630Z","avatar_url":"https://github.com/cuth.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"SVG ALL THE THINGS\n==================\n\n![SVG - All the Things](img/SVG-allthethings.png)\n\n\n\nWhy SVG?\n--------\n\nChoosing a web image\n\n| [jpg](img/horse.jpg) | [gif](img/horse.gif) | [png](img/horse.png) | [svg](img/horse.svg) |\n|-----|-----|-----|-----|\n| ![jpg](img/horse.jpg) | ![gif](img/horse.gif) | ![png](img/horse.png) | ![svg](http://cuth.github.io/svg-allthethings/img/horse.svg) |\n| Many colors | Animation | Transparency | Resolution Independence |\n\nSVG also has animation and transparency but it's not good for photographs.\n\n**Why do we care about different resolutions?**  \nretina screens, mobile phones, print, zoom\n\n**SVG vs Icon Fonts**  \nhttp://css-tricks.com/icon-fonts-vs-svg/  \nhttp://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/  \n\n\nWhat is SVG?\n------------\n\n* Stands for **Scalable Vector Graphics**. \n* It is an *XML* file that can be edited in any text editor.  \n* Replaces *PGML* and *VML* as the standard vector graphic for the web.  \n* **SVG 1.1 Second Edition** is the *current standard*; **SVG 2** is *under development*.  \n\nSpecs - [www.w3.org/TR/SVG/](http://www.w3.org/TR/SVG/)\n\nFeature Sets:\n\n* [Paths](http://www.w3.org/TR/SVG/paths.html)\n* [Shapes](http://www.w3.org/TR/SVG/shapes.html)\n* [Text](http://www.w3.org/TR/SVG/text.html)\n* [Painting](http://www.w3.org/TR/SVG/painting.html)\n* [Color](http://www.w3.org/TR/SVG/color.html)\n* [Gradients and Patterns](http://www.w3.org/TR/SVG/pservers.html)\n* [Masking](http://www.w3.org/TR/SVG/masking.html)\n* [Filters](http://www.w3.org/TR/SVG/filters.html)\n* [Interactivity](http://www.w3.org/TR/SVG/interact.html)\n* [Linking](http://www.w3.org/TR/SVG/linking.html)\n* [Scripting](http://www.w3.org/TR/SVG/script.html)\n* [Animation](http://www.w3.org/TR/SVG/animate.html)\n* [Fonts](http://www.w3.org/TR/SVG/fonts.html)\n* [Metadata](http://www.w3.org/TR/SVG/metadata.html)\n\n\n### DTD (doctype)\n\n[SVG doctype declarations are optional](http://www.w3.org/QA/2002/04/valid-dtd-list.html).\n\n    Beyond the specificities of (X)HTML processing, Doctype declarations in XML languages are only useful to declare named entities and to facilitate the validation of documents based on DTDs. This means that in many XML languages, doctype declarations are not necessarily useful.\n\n### Organizational Elements\n`\u003cg\u003e`,`\u003cuse\u003e`,`\u003cdefs\u003e`,`\u003csymbol\u003e`\n\n### Paths\n\n\"the \u003cpath\u003e element is the most powerful element in the SVG library of basic shapes\" - [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths)\n\nLine commands: (uppercase is absolute and lowercase is relative)\n\n* 'M' or 'm': move to (x, y)\n* 'L' or 'l': line to (x, y)\n* 'H' or 'h': horizontal line (x)\n* 'V' or 'v': vertical line (y)\n* 'Z' or 'z': close path\n* 'C' or 'c': cubic bezier curve (x1, y1, x2, y2, x, y)\n* 'S' or 's': cubic bezier curver shortcut (x2, y2, x, y)\n* 'Q' or 'q': quadratic bezier curve (x1, y1, x, y)\n* 'T' or 't': quadratic bezier curve shortcut (x, y)\n* 'A' or 'a': arc (rx, ry, x-axis-ration, large-arc-flag, sweep-flag, x y)\n\nFor the sake of brevity in paths, superfluous white space and separators can be removed as well as subsequent commands if the command is the same.\n\n    M 100 100 L 200 200  \n    M100 100L200 200\n\n    M 100 200 L 200 100 L -100 -200  \n    M 100 200 L 200 100 -100 -200\n\n\n### Coordinate System\n\n[The viewport, viewBox, \u0026 preserveAspectRatio](http://sarasoueidan.com/blog/svg-coordinate-systems/)\n\n`viewBox`  \nAttribute that sets the size of the canvas that all the coordinates inside the SVG use.\n\n`preserveAspectRatio`  \nAttribute that determines the relationship between the viewBox and viewport. Important for maintaining aspect ratio in scaling.\n\n### Basic Shapes\n```svg\n\u003c!--    rectangle    --\u003e\n\u003crect x=\"0\" y=\"3\" width=\"32\" height=\"5\" /\u003e\n\n\u003c!-- rounded corners --\u003e\n\u003crect x=\"0\" y=\"3\" width=\"32\" height=\"5\" rx=\"3\" ry=\"3\" /\u003e\n\n\u003c!--     circle      --\u003e\n\u003ccircle cx=\"50\" cy=\"50\" r=\"100\" /\u003e\n\n\u003c!--    ellipse      --\u003e\n\u003cellipse cx=\"50\" cy=\"50\" rx=\"30\" ry=\"20\" /\u003e\n\n\u003c!--      line       --\u003e\n\u003cline x1=\"10\" y1=\"5\" x2=\"20\" y2=\"15\" /\u003e\n\n\u003c!--    polyline     --\u003e\n\u003cpolyline points=\"10,20 10,30 15,30\" /\u003e\n\n\u003c!--    polygon      --\u003e\n\u003cpolygon points=\"10,20 10,30 15,30\" /\u003e\n```\n\n\n\nUsing SVG\n---------\n\nExamples from [CSS-Tricks](http://css-tricks.com/using-svg/) and [Sitepoint](http://www.sitepoint.com/add-svg-to-web-page/).\n\nImage tag\n```html\n\u003cimg src=\"image.svg\"\u003e\n```\n\nObject tag\n```html\n\u003cobject type=\"image/svg+xml\" data=\"image.svg\"\u003e\u003c/object\u003e\n```\n\nIframe\n```html\n\u003ciframe src=\"image.svg\"\u003e\u003c/iframe\u003e\n```\n\nInline Use\n```html\n\u003csvg\u003e\u003cuse xlink:href=\"image.svg#imageId\"\u003e\u003c/use\u003e\u003c/svg\u003e\n```\n\nCSS Background\n```css\ndiv {\n    background: url('image.svg');\n}\n```\n\n**[Test Embed](http://cuth.github.io/svg-allthethings/test-embed.html)**\n\n\n### [Styling](http://www.w3.org/TR/SVG/styling.html)\n\n**Common attributes**  \n`fill`, `stroke`, `transform`  \n`currentColor`  \n\n\n### Animating\n\n**Built in animation** using *[animate elements](http://www.w3.org/TR/SVG/animate.html)* and *[SMIL](http://www.w3.org/TR/REC-smil/)*  \n[Simple Example](http://oak.is/thinking/animated-svgs/)\n\n**Javascript frameworks**  \n[Raphaël](http://raphaeljs.com/) ([examples](http://codepen.io/tag/raphael/))  \n[d3](http://d3js.org/)  \n[Snap.svg](http://snapsvg.io/)  \n[bonsai](http://bonsaijs.org/)\n\n**Tricks**  \n[Line animation trick](http://product.voxmedia.com/2013/11/25/5426880/polygon-feature-design-svg-animations-for-fun-and-profit)\n\n\nSprites\n-------\n\nSprites are used to lower the amount of requests made to the server. With PNGs this was done by flattening all the images on to one image and clipping the image to only show the portion that you wanted. This is still possible with SVG but there are better ways to do this.\n\n**Using `defs` or `symbol`**  \n[svg4everybody](https://github.com/jonathantneal/svg4everybody) (IE and Android support)  \n[Test Sprite](http://cuth.github.io/svg-allthethings/test-sprite.html)  \n\n**Using data-uri embeded in CSS**  \n[Test Data URI](http://cuth.github.io/svg-allthethings/test-datauri.html)  \nDrawbacks? Can't style or edit. CSS bloat.  \n\nTooling\n-------\n\nGenerate sprite sheets, data-uris or png fallbacks.\n\n**Web tools**  \n[Grumpicon](http://www.grumpicon.com/)  \n[iconizr](http://iconizr.com/)  \n\n**NPM**  \n[gulp-base64](https://github.com/Wenqer/gulp-base64)  \n[gulp-imacss](https://github.com/akoenig/gulp-imacss)  \n[Many more](https://www.npmjs.org/search?q=svg%20sprite)  \n\n\n\nBrowser Support\n---------------\n\n[Can I Use](http://caniuse.com/#search=svg)\n\n* [basic support](http://caniuse.com/#feat=svg)\n* [effects for HTML](http://caniuse.com/#feat=svg-html)\n* [filters](http://caniuse.com/#feat=svg-filters)\n* [fonts](http://caniuse.com/#feat=svg-fonts)\n* [fragment identifiers (sprites)](http://caniuse.com/#feat=svg-fragment)\n* [CSS backgrounds](http://caniuse.com/#feat=svg-css)\n* [HTML `img` element](http://caniuse.com/#feat=svg-img)\n* [SMIL animation](http://caniuse.com/#feat=svg-smil)\n* [inline](http://caniuse.com/#feat=svg-html5)\n* [blending of HTML/SVG elements](http://caniuse.com/#feat=css-mixblendmode)\n\n\n### Testing for support\n\n[Modernizr](http://modernizr.com/download/#-inlinesvg-svg-svgclippaths-teststyles-svg_filters)\n\n* basic support\n* inline\n* clip paths\n* filters\n\n[hasFeature](http://css-tricks.com/test-support-svg-img/)\n\n```js\ndocument.implementation.hasFeature(\"http://www.w3.org/TR/SVG11/feature#Image\", \"1.1\");\n```\n\n\n\nThere is much more\n------------------\n\nhttp://css-tricks.com/mega-list-svg-information/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuth%2Fsvg-allthethings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcuth%2Fsvg-allthethings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuth%2Fsvg-allthethings/lists"}