{"json_modified": "2016-09-14T08:54:32.289574", "uuid": "c6452044-67a6-440e-af24-3abf329d7935", "title": "SVG Guidelines", "url": "/en-US/docs/Mozilla/Developer_guide/SVG_Guidelines", "tags": ["Firefox", "contributing", "Mozilla", "Contributing", "practices", "SVG", "Developing", "Contribute", "Guidelines", "guidelines"], "translations": [{"uuid": "ff41309c-8634-4ca1-b5c2-a7e1b8356c85", "title": "SVG \u30ac\u30a4\u30c9\u30e9\u30a4\u30f3", "url": "/ja/docs/Mozilla/Developer_Guide/SVG_Guidelines", "tags": [], "summary": "The <a href=\"/en-US/docs/Web/SVG\">SVG</a> format has the advantage of being able to describe complex images while being lightweight and to scaling them very well at all resolutions. Unfortunately, a lot of SVG files (often generated by SVG editors) ship without being cleaned up, so the benefit of them being lightweight is gone. Here are some best pratices to keep SVGs lightweight. These rules are based on some real examples seen in Mozilla's code.", "localization_tags": [], "locale": "ja", "last_edit": "2016-03-10T03:02:55", "review_tags": []}], "modified": "2016-09-14T08:54:32", "label": "SVG Guidelines", "localization_tags": [], "locale": "en-US", "id": 160443, "last_edit": "2016-09-14T08:54:30", "summary": "When used as a document format there is usually a compelling reason that makes SVG the only solution. When used as an <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_as_an_Image\">image format</a>, it is sometimes less obvious whether it would be best to use SVG or a raster image format for any given image. The\u00a0vector format SVG and raster formats like PNG both have their place. When choosing whether or not to use SVG it is best to understand the advantages and disadvantages of both.", "sections": [{"id": "Pros_and_cons_of_SVG_for_images", "title": "Pros and cons of SVG for images"}, {"id": "Authoring_guidelines", "title": "Authoring guidelines"}, {"id": "Basics", "title": null}, {"id": "Whitespace_and_line_breaks", "title": "Whitespace and line breaks"}, {"id": "Whitespace", "title": "Whitespace"}, {"id": "Examples", "title": "Examples"}, {"id": "Line_breaks", "title": "Line breaks"}, {"id": "Unused_tags_and_attributes", "title": null}, {"id": "Editor_metadata", "title": null}, {"id": "Other_metadata", "title": "Other metadata"}, {"id": "Avoid_the_use_of_CDATA_sections", "title": null}, {"id": "Invisible_shapes", "title": "Invisible shapes"}, {"id": "Unused_attributes_on_root_<svg>_element", "title": "Unused attributes on root "}, {"id": "Other", "title": "Other"}, {"id": "Styling", "title": null}, {"id": "Basics_2", "title": "Basics"}, {"id": "Examples_2", "title": null}, {"id": "Use_of_class_names", "title": null}, {"id": "Default_style_values", "title": null}, {"id": "SVG_grouping", "title": "SVG grouping"}, {"id": "Style_grouping", "title": "Style grouping"}, {"id": "Avoid_excessive_grouping", "title": "Avoid excessive grouping"}, {"id": "Nested_groups", "title": "Nested groups"}, {"id": "Nested_transforms", "title": "Nested transforms"}, {"id": "Performance_tips", "title": null}, {"id": "Tools", "title": "Tools"}], "slug": "Mozilla/Developer_guide/SVG_Guidelines", "review_tags": []}