{"json_modified": "2016-05-03T11:26:16.286044", "uuid": "3ffb29c9-e898-48c6-a961-88595f9e0efb", "title": "Scaling of SVG backgrounds", "url": "/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds", "tags": ["CSS", "Images", "SVG", "Guide", "Background"], "translations": [{"uuid": "c47e4297-2ed3-4ec9-8000-bbcfe76d808b", "title": "Redimensionnement d'arri\u00e8re-plans SVG", "url": "/fr/docs/Web/CSS/Redimensionnement_arri%C3%A8re-plans_SVG", "tags": ["CSS", "SVG", "Guide"], "summary": "Les images SVG sont tr\u00e8s flexibles et lorsqu'on les utilise en CSS avec les propri\u00e9t\u00e9s <a href=\"/fr/docs/Web/CSS/background-image\" title=\"La propri&#xE9;t&#xE9; background-image permet de d&#xE9;finir une ou plusieurs images comme arri&#xE8;re(s)-plan(s) pour un &#xE9;l&#xE9;ment. Les images sont dessin&#xE9;es les unes au-dessus des autres. La premi&#xE8;re image indiqu&#xE9;e est dessin&#xE9;e comme &#xE9;tant la plus proche de l'utilisateur.\"><code>background-image</code></a> et <a href=\"/fr/docs/Web/CSS/background-size\" title=\"La propri&#xE9;t&#xE9; background-size d&#xE9;finit la taille des images d'arri&#xE8;re-plan pour l'&#xE9;l&#xE9;ment. La taille de l'image peut &#xEA;tre contrainte, compl&#xE8;tement ou partiellement afin de conserver ses proportions.\"><code>background-size</code></a>, il faut s'assurer de consid\u00e9rer les diff\u00e9rents aspects qui leurs sont propres. Dans cet article, on d\u00e9crit comme les images SVG sont redimensionn\u00e9es gr\u00e2ce \u00e0 ces propri\u00e9t\u00e9s.", "localization_tags": [], "locale": "fr", "last_edit": "2016-05-03T11:26:12", "review_tags": []}], "modified": "2014-07-02T06:32:43", "label": "Scaling of SVG backgrounds", "localization_tags": [], "locale": "en-US", "id": 5470, "last_edit": "2014-07-02T06:32:40", "summary": "Given the flexibility of SVG images, there's a lot to keep in mind when using them as background images with the <a href=\"/en-US/docs/Web/CSS/background-image\"><code>background-image</code></a> property, and even more to keep in mind when also scaling them using the <a href=\"/en-US/docs/Web/CSS/background-size\"><code>background-size</code></a> property. This article describes how scaling of SVG images is handled when using these properties.", "sections": [{"id": "The_algorithm_in_summary", "title": "The algorithm, in summary"}, {"id": "Source_image_examples", "title": "Source image examples"}, {"id": "Dimensionless_and_proportionless", "title": "Dimensionless and proportionless"}, {"id": "One_specified_dimension_and_proportionless", "title": "One specified dimension and proportionless"}, {"id": "One_specified_dimension_with_intrinsic_ratio", "title": "One specified dimension with intrinsic ratio"}, {"id": "No_width_or_height_with_intrinsic_ratio", "title": "No width or height with intrinsic ratio"}, {"id": "Scaling_examples", "title": "Scaling examples"}, {"id": "Specifying_fixed_lengths_for_both_dimensions", "title": "Specifying fixed lengths for both dimensions"}, {"id": "Source_No_dimensions_or_intrinsic_ratio", "title": "Source: No dimensions or intrinsic ratio"}, {"id": "Source_One_specified_dimension_no_intrinsic_ratio", "title": "Source: One specified dimension, no intrinsic ratio"}, {"id": "Source_One_specified_dimension_with_intrinsic_ratio", "title": "Source: One specified dimension with intrinsic ratio"}, {"id": "Source_No_specified_width_or_height_with_intrinsic_ratio", "title": "Source: No specified width or height with intrinsic ratio"}, {"id": "Using_contain_or_cover", "title": "Using contain or cover"}, {"id": "Source_No_dimensions_or_intrinsic_ratio_2", "title": "Source: No dimensions or intrinsic ratio"}, {"id": "Source_One_specified_dimension_no_intrinsic_ratio_2", "title": "Source: One specified dimension, no intrinsic ratio"}, {"id": "Source_One_specified_dimension_with_intrinsic_ratio_2", "title": "Source: One specified dimension with intrinsic ratio"}, {"id": "contain_case", "title": "contain case"}, {"id": "cover_case", "title": "cover case"}, {"id": "Source_No_dimensions_with_intrinsic_ratio", "title": "Source: No dimensions with intrinsic ratio"}, {"id": "contain_case_2", "title": "contain case"}, {"id": "cover_case_2", "title": "cover case"}, {"id": "Automatic_sizing_using_auto_for_both_dimensions", "title": "Automatic sizing using \"auto\" for both dimensions"}, {"id": "Source_No_dimensions_or_intrinsic_ratio_3", "title": "Source: No dimensions or intrinsic ratio"}, {"id": "Source_One_dimension_and_no_intrinsic_ratio", "title": "Source: One dimension and no intrinsic ratio"}, {"id": "Source_One_dimension_and_an_intrinsic_ratio", "title": "Source: One dimension and an intrinsic ratio"}, {"id": "Source_No_fixed_dimensions_with_intrinsic_ratio", "title": "Source: No fixed dimensions with intrinsic ratio"}, {"id": "Using_auto_and_one_specific_length", "title": "Using \"auto\" and one specific length"}, {"id": "Source_No_dimensions_or_intrinsic_ratio_4", "title": "Source: No dimensions or intrinsic ratio"}, {"id": "Source_One_specified_dimension_with_no_intrinsic_ratio", "title": "Source: One specified dimension with no intrinsic ratio"}, {"id": "Source_One_specified_dimension_with_intrinsic_ratio_3", "title": "Source: One specified dimension with intrinsic ratio"}, {"id": "Source_No_specified_dimensions_with_intrinsic_ratio", "title": "Source: No specified dimensions with intrinsic ratio"}, {"id": "See_also", "title": "See also"}], "slug": "Web/CSS/Scaling_of_SVG_backgrounds", "review_tags": ["technical"]}