Why is SVG not adjusting to the screen size properly?

How can I make an SVG fit to its parent <div>-container and resize with the screen size? My initial plan involved controlling the size of the SVG based on the percental width and height of the parent <div>-container. Looking for any suggestions or recommendations!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
    <div id="svgwrapper">
        <div class='content_box' id='content_box4'>
    Schield 4
    <div class='svg_schild' id='svg_schild4'>
        <svg xmlns='http://www.w3.org/2000/svg' version='1.1'
            preserveAspectRatio='xMinYMin' viewBox='-2000 -6000 10000 7000'>
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='5306,-541 5285,-871 5267,-870 5297,-395 4993,-376 4977,-641 4955,-660 4947,-660 4921,-1086 4919,-1098 4914,-1108 4902,-1116 4887,-1120 4595,-1101 4589,-1099 4588,-1096 4587,-1087 4588,-1073 4573,-1072 4574,-1058 4564,-1057 4565,-1031 4574,-1032 4600,-620 4377,-606 4376,-615 4337,-613 4338,-604 4332,-603 4334,-579 4339,-580 4339,-574 4345,-573 4346,-565 434...
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='5349,-544 5360,-356 5401,-318 5596,-329 5596,-319 5597,-304 5753,-312 5757,-308 5758,-297 5754,-291 5697,-268 5683,-224 5699,-201 5698,-194 5690,-187 5689,-186 6661,-239 6659,-240 6651,-246 6650,-253 6662,-277 6644,-320 6585,-337 6580,-342 6580,-353 6584,-357 6729,-365 6734,-361 6734,-371 6829,-376 6847,-92 7005,-86 7003,-26 6748,-35 6749,-70 6746,-67 6607,-59 6613,-30 6504,-6 5881,28 5759,16...
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='2068,-465 2059,-473 865,-355 865,-355 825,-351 825,-351 754,-344 754,-344 753,-344 753,-347 751,-348 735,-347 733,-345 751,-166 753,-165 769,-166 771,-169 770,-172 771,-172 771,-171 842,-178 842,-179 882,-183 882,-182 2076,-299 2083,-308 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='641,-293 585,-288 584,-287 578,-286 579,-275 578,-271 575,-269 424,-254 431,-190 581,-204 585,-203 587,-200 588,-188 594,-189 595,-188 651,-194 641,-293 1785,-406 1795,-307 651,-194 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='1766,-129 601,-104 581,-108 571,-117 566,-130 563,-172 557,-185 545,-191 507,-195 493,-194 445,-182 430,-183 420,-190 414,-204 411,-241 414,-253 424,-264 438,-267 488,-265 502,-266 548,-277 557,-282 562,-291 563,-298 562,-307 560,-310 557,-311 535,-310 533,-335 447,-328 449,-303 432,-302 415,-305 401,-314 391,-330 383,-356 348,-357 336,-337 332,-83 334,-80 393,-21 432,2 3605,52 ...
            ... <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='775,-1979 780,-1979 784,-1977 789,-1974 792,-1968 795,-1957 800,-1958 811,-1920 817,-1914 822,-1912 827,-1911 834,-1911 940,-1942 1011,-1942 1056,-1925 1091,-1892 1114,-1848 1119,-1801 1108,-1753 1082,-1712 1019,-1674 880,-1633 1039,-1294 1045,-1274 1047,-1255 1047,-1211 1032,-1163 990,-1134 -985,-553 -1036,-547 -1098,-565 -1148,-606 -1171,-654 -1372,-1336 -1373,-1345 -1371,-1353 -1366,-1360 -13...
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='2967,-253 2987,-249 2994,-241 2992,-114 2991,-85 2980,-59 2962,-37 2908,15 2885,32 2859,44 0,0 -9,-8 -9,-28 -7,-138 -3,-163 7,-185 25,-205 215,-365 226,-374 240,-382 1016,-815 1148,-888 1185,-903 1227,-909 1269,-902 1316,-880 1409,-818 1503,-761 1598,-717 1697,-683 1767,-663 1866,-641 1970,-628 2037,-626 2358,-621 2379,-617 2398,-604 2412,-585 2418,-565 2430,-396 2438,-358 2455,-323 2481,-294 2514,...
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='-509,-142 -533,-151 -555,-166 -571,-186 -582,-210 -587,-238 -582,-520 -578,-541 -566,-561 -547,-574 -528,-579 453,-623 532,-630 635,-648 736,-677 833,-716 895,-748 1015,-815 239,-383 225,-374 215,-365 24,-205 6,-185 -3,-163 -7,-138 -9,-28 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8...'
            
    </div>
    </div>
    </div>
</body>
</html>
htmlcsssvg

Answer №1

Make sure to include the following code within your style tags at the beginning of your webpage

body,
div, svg {
    margin: 0;
    border: 0 none;
    padding: 0;
}

html,
body,
div, svg {
   height: 99%;
   max-width: 99%;
   min-height: 90%;
}

Answer №2

Utilizing the CSS3 @media Rule can help you manage the appearance, such as size, of your HTML elements. You have the ability to adjust the dimensions of both the div element and the .svg_schild class.

Implementing this strategy should provide a robust solution to your SVG scaling issue.

Answer №3

Essentially, a div is considered a block element in HTML that automatically adjusts its width to match that of its parent element. It's worth noting that when using div elements within your script, be mindful of any padding within the body. To address this issue, include the following lines in your style block:

html,body{padding:0px;margin:0px;}
svg{width:100%}

Implementing this should resolve the problem, unless there are other crucial details I may have overlooked.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Every div must have at least one checkbox checked

Coding in HTML <div class="response"> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> </div> <div class="response"> <input type="check ...

javascriptjquerycss

In JavaScript, a "switch statement" retrieves a test value from a "input type text" by accessing the value using getElementByName.value

Attempting to test 7 possible values for the variable 'a' by passing it to a function from user input in seven 'input type text' boxes, then checking each value individually with clicks on 7 'input type image' elements. Howeve ...

javascripthtml

The issue with the `.load` function in jQuery not functioning properly

I'm currently tackling an issue with a project where I am encountering difficulties with the .load function not working in Google Chrome. Below is the JavaScript code: function link1() { $('#loadarea').html('loading.....' ...

javascriptjqueryhtmlload

Element that emulates a different element in HTML

Is it possible to have one element that can control and change multiple clone elements, mimicking every change made to the original? While JavaScript & jQuery can easily achieve this, most solutions involve separate variables or instances for each element ...

javascripthtmldom

"Challenges in styling a table within a div: the text fails to adhere to the

I am struggling to identify the source of a problem in my code. The issue seems to be related to the padding within the parent div, specifically with the text "1 Healthy Midday Meal for One Child Overseas" and how it is ignoring the 5px right padding. Upon ...

htmlcss

Non-responsive Click Event on Dynamically Created Div Class

I am facing some uncertainty in approaching this problem. In the HTML, I have created buttons with additional data attributes. These buttons are assigned a class name of roleBtn. When clicked, they trigger the jQuery function called roleBtnClicked, which ...

javascriptjqueryhtmlclickjquery-events

Exploring the implementation of a many-to-many relationship on a webpage

In the process of creating a library database and dealing with a many-to-many relationship between books and writers, I am contemplating how best to design the user interface for managing this information. When editing a book entry, selecting one or more ...

htmldatabaseuser-interfacemany-to-many

Styling just a single div when the state changes

I have a scenario where I am rendering 4 divs based on data fetched from my backend. Each div is colored according to a state change. While I have successfully implemented this, the issue is that all 4 divs can be colored in this way simultaneously. I want ...

javascripthtmlcssreactjsstate

Guide on importing SVG files dynamically from a web service and displaying them directly inline

With an extensive collection of SVG files on hand, my goal is to render them inline. Utilizing create-react-app, which comes equipped with @svgr/webpack, I am able to seamlessly add SVG inline as shown below: import { ReactComponent as SvgImage } from &apo ...

reactjstypescriptsvgcreate-react-appinline

Styling an image with dual attributes using CSS

I'm looking to customize two img classes with different properties. For instance, in my CSS, I want to define: img { padding-left: 15pt; float: right; } and then: img1 { padding-left: 15pt; float: left; } where img1 would serve as a tag fo ...

htmlcss

The div is not positioned on the left side

I'm struggling with aligning three divs next to each other in HTML and CSS. I've set them to float: left, but they are not obeying this style rule. .threethings { width: 20%; } .threethings div { text-align: center; position: relative; ...

htmlcssweb

Issue with resizing a Bootstrap pill containing truncated text

After struggling with this issue for some time, I attempted to use javascript to solve it but have been unsuccessful. The challenge involves a tag list in a table that displays a link when hovered over. Following advice from another member on SO, I managed ...

htmlcssbootstrap-5

When utilizing pseudo element ::before and display:table-cell in IE11, the glyphicons content may not appear as expected

I've been working on this for a while now, but I can't seem to find a solution. The issue I'm facing is that I want to display a glyphicon before the content of a text-block, and I need that element with the icon to fill up all the height th ...

htmlcssinternet-explorer-11

CSS and Javascript functioning correctly within internal server, but encountering issues when accessed externally

I am in the process of creating a website for a friend. The goal is to have a flashy animated style website that functions well on IOS and allows him to make changes easily. To achieve this, I am utilizing JQuery, my own javascript, and multiple css files. ...

javascriptjquerycssinternet-explorer

Incorporating an external script within a Next.js application

I've been having trouble incorporating an external JavaScript source into my Next.js application and I keep encountering the following error: Failed to execute 'write' on 'Document': It isn't possible to write into a documen ...

javascripthtmlreactjsnext.js

Securing ASP.NET Core applications with iframe authentication cookies

I seem to be facing an issue with my iframe. Whenever I attempt to login, it appears that my authentication cookie is not functioning correctly as I keep getting redirected back to the login screen. How can I resolve this? The cookie operates normally whe ...

htmlasp.net-coreiframerazor-pagesx-frame-options

Tips for personalizing the Material-UI sticky header to work with horizontal scrolling

Check out this example of a Material UI table with a sticky header on CodeSandox: https://codesandbox.io/s/yi98d?file=/demo.tsx I encountered an issue where the left side header cells slide behind each other when I added a stickyHeader prop to the Materia ...

cssreactjsmaterial-ui

What is causing the slider image to be the only element that is not adapting to different screen sizes?

I am currently using the flexslider from woothemes and I am unable to understand why the image is consistently wider than the content when the browser window is resized or when viewed on an iPad/iPhone. Upon inspection, I couldn't find any styles on ...

jquerycssresponsive-design

Reaching SVG with CSS

Is it possible to target SVG elements with CSS? In older versions of IE, they display like broken images and I want to hide them using modernizr. I'm looking for a solution like the following... .no-svg object[type=svg] { display:none; } I have be ...

csssvgcss-selectors

Setting MenuItem to the correct width in asp.net simplified

I have a 1000px wide container, within it there is a menu control with 5 items (links). Each item has a width of 200px in the CSS file to make use of the entire length of the line. .level1 { border-width: 0px; margin: 0px; padding: 0px; background ...

c#asp.netcss