How To Make An Svg Scale With Its Parent Container ? - GeeksforGeeks

Trang chủ » Html Scale Svg Element » How To Make An Svg Scale With Its Parent Container ? - GeeksforGeeks

Có thể bạn quan tâm

Skip to content geeksforgeeks
  • Tutorials
    • Python Tutorial
      • Python Data Types
      • Python Loops and Control Flow
      • Python Data Structures
      • Python Exercises
    • Java
      • Java Programming Language
        • OOPs Concepts
      • Java Collections
      • Java Programs
      • Java Interview Questions
      • Java Quiz
      • Advance Java
    • Programming Languages
    • System Design
      • System Design Tutorial
    • Interview Corner
    • Computer Science Subjects
    • DevOps
    • Linux
    • Software Testing
    • Databases
    • Android
    • Excel
    • Mathematics
  • DSA
    • Data Structures
      • Linked List
      • Tree
    • Algorithms
      • Analysis of Algorithms
      • Searching Algorithms
      • Sorting Algorithms
    • Practice
      • Company Wise Coding Practice
      • Practice Problems Difficulty Wise
      • Language Wise Coding Practice
      • Curated DSA Lists
    • Company Wise SDE Sheets
    • DSA Cheat Sheets
    • Puzzles
  • Data Science
    • Data Science Packages
    • Data Visualization
    • Data Analysis
  • Web Tech
    • Web Development Using Python
      • Django
      • Flask
    • Cheat Sheets
  • Courses
    • DSA Courses
    • Programming Languages
  • HTML Tutorial
  • HTML Exercises
  • HTML Tags
  • HTML Attributes
  • Global Attributes
  • Event Attributes
  • HTML Interview Questions
  • HTML DOM
  • DOM Audio/Video
  • HTML 5
  • HTML Examples
  • Color Picker
  • A to Z Guide
  • HTML Formatter
▲ Open In App How to make an svg scale with its parent container ? Last Updated : 03 Nov, 2020 Improve Improve Like Article Like Save Share Report

SVG is the abbreviation for Scalable Vector Graphics. It is an Extensible Markup Language (XML) based vector image format for two-dimensional graphics. It supports interactivity and animation. This means that every attribute and every element present in the SVG file can be animated. SVG image behaviors are defined in XML text files. They can be searched, indexed, scripted, compressed, and can be created or edited using any text editor, as well as using drawing software such as Inkscape. Almost every modern web browser support SVG.

The reason why it is tricky to scale SVG is that it does not scale like the other image formats. SVG images have a clearly defined aspect ratio: the ratio of width to the height which makes it difficult to scale with the changing parent container. Other images scale easily because the browser determines the height, width, and aspect ratio of the image, and it adjusts everything accordingly. So giving these properties to SVG should be the first step to our requirement. Although setting height and width barely sets an aspect ratio but what we aim for is scaling which is beyond the aspect ratio. A viewbox can serve our purpose rightly. The viewBox is an attribute of the <svg> element which takes four parameters x, y, width, and height. x and y signify the origin of the SVG coordinate system and width and height signify the number of pixels or coordinates that should be scaled to fill the width and height respectively. Let us take a look at the following example:

First approach:

  • At first, we create a container that occupies 30% of the total width of the screen and 20% of the total height of the screen.
  • Next, we create an SVG image(rectangle) using the <rect> tag and specifying the height, width, and fill attributes.
  • The <svg> element wraps the rectangle image. The SVG element occupies 100% width of the parent container and its height is auto-adjusted depending on screen size. We use viewBox to make the SVG image scalable.
  • viewBox = “0 0 100 100”: defines a coordinate system having x=0, y=0, width=100 units and height=100 units.
  • Thus, the SVG containing a rectangle having width=50px and height=50px will fill up the height and width of the SVG image, and all the dimensions get scaled equally. Changing the x and y coordinates can yield different results, but we will keep ourselves restricted to the stated values.

Example:

HTML

<!DOCTYPE html> <html> <body> <div class="container" style= "width:30%; height: 20%; border:1px dashed black;"> <svg width="100%" height="auto" viewBox="0 0 100 100"> <rect width="50" height="50" style="fill:rgb(0,170,0); stroke-width:1; stroke:rgb(0,0,0)" /> </svg> </div> </body> </html>

Output:

  • Full Screen:

Full Screen

  • Minimized Screen:

Minimized Screen

Second approach:

  • The second approach demonstrates scaling of an svg image which is present within the <img> tag.
  • In this case, browsers automatically adjust the image aspect ratio based on the current screen size.
  • It is important to mention either height or width as an attribute in the img tag else there is possibility that Internet Explorer may change width = ”auto” and height =”auto” to some value which is acceptable to it.

Example:

HTML

<!DOCTYPE html> <html> <body> <div class="container" style= "width:80%; height:80%; border:1px dashed black;"> <img src="E:\method-draw-image.svg" style="width:50%"> </div> </body> </html>

Output:

  • Full Screen:

Full Screen

  • Minimized Screen:

Minimized Screen

S

Shreyasi_Chakraborty Follow Improve Next Article How to resize SVG to fill its container in ReactJS?

Please Login to comment...

Similar Reads

How to resize SVG to fill its container in ReactJS? We can resize SVG to fill its container in ReactJS using the type props. We can add the following style to the SVG CSS Syntax: svg { width: inherit; height: inherit; } React Syntax: &lt;svg style = {{ width: "inherit", height:"inherit"}} // Child elements &lt;/svg&gt;Creating React Application: Step 1: Create a React application using the following 2 min read How to move a container inside of another container in Bootstrap 5 ? The container is used to set the content’s margin. It contains row elements and the row elements are containers of columns. This is known as the grid system. In this article, we will learn about How to move a container inside of another container in Bootstrap 5. We will move a container to the left in another container. Syntaxms-0 me-0 Table of Con 2 min read What is the Difference Between container and container-fluid in Bootstrap 5 ? In Bootstrap 5, the "container" class creates a responsive container with a fixed width, adjusting to different screen sizes while maintaining margins. On the other hand, the "container-fluid" class generates a full-width container that spans the entire viewport without any margins, providing a seamless layout across various devices. "Container" is 3 min read How to force child div to be 100% of parent div's height without specifying parent's height? When designing a website, you may want to create a layout where a child div element fills up the height of its parent div element. However, you may not know the exact height of the parent div element and you don't want to specify it. In this article, we will explore different approaches to force a child div element to be 100% of its parent div elem 3 min read SVG scale Attribute The scale attribute decides the displacement scale factor that must be used on a &lt;feDisplacementMap&gt; filter primitive. Only &lt;feDisplacementMap&gt; element is using this attribute. Syntax: scale = "number" Attribute Values: The scale attribute accepts the values mentioned above and described below number: It is either an integer or a number 2 min read SVG FEDisplacementMap.scale Property The SVG FEDisplacementMap.scale property returns the SVGAnimatedNumber object corresponding to the scale component of the FEDisplacementMap.scale element. Syntax: var a = FEDisplacementMap.scale Return value: This property returns the SVGAnimatedNumber object corresponding to the scale component of the FEDisplacementMap.scale element. Example 1: C/ 1 min read SVG &lt;svg&gt; Element SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. SVG graphics are supported by the &lt;svg&gt; element in HTML. SVG graphics feature a container in which we can create a variety of shapes such as boxes, pathways, text, graphic images, and circles. Syntax: &lt;svg width="x" height="y"&gt; sh 2 min read What is the Position of an element relative to its container in CSS ? In this article, we will learn what is the position of an element relative to its container. The position property in CSS tells about the method of positioning for an element or an HTML entity. There are five different types of position properties available in CSS: Fixed: Any HTML element with position: fixed property will be positioned relative to 4 min read How to position a div at the bottom of its container using CSS? To position a div at the bottom of its container in CSS, you can use various approaches. Using absolute positioning involves setting `position: absolute;` and `bottom: 0;`, aligning the div at the container's bottom. Flexbox achieves this by employing `display: flex;` and `margin-top: auto;`, while Grid utilizes `display: grid;` with a defined temp 2 min read How to remove parent element except its child element using jQuery ? Given an HTML document and the task is to remove the parent element except for its child element. Approach 1: Use contents() method to select all the direct children, including text and comment nodes for the selected element.Selected elements are stored in a variable.Now, use replaceWith() method to replace the content of parent element by its all 2 min read View More Articles Article Tags :
  • HTML-SVG
  • HTML
  • Web Technologies
Like three90RightbarBannerImg Explore More We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy Got It ! Lightbox Improvement Please go through our recently updated Improvement Guidelines before submitting any improvements. This article is being improved by another user right now. You can suggest the changes for now and it will be under the article's discussion tab. You will be notified via email once the article is available for improvement. Thank you for your valuable feedback! Suggest changes Please go through our recently updated Improvement Guidelines before submitting any improvements. Suggest Changes Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal. geeksforgeeks-suggest-icon Create Improvement Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all. geeksforgeeks-improvement-icon Suggest Changes Suggestion[CharLimit:2000] Create Improvement

What kind of Experience do you want to share?

Interview Experiences Admission Experiences Career Journeys Work Experiences Campus Experiences Competitive Exam Experiences Can't choose a topic to write? click here for suggested topics Write and publish your own Article

Từ khóa » Html Scale Svg Element