The alignment of SVG is not in sync with the aspect ratio

I've been struggling with this issue for some time now, trying to align the SVGs correctly for different width and height values. My viewBox has an aspect ratio of 16:9, and I want to scale the SVG accordingly. It's working fine for certain combinations of width and height, but for others, it's not lining up properly despite having the same aspect ratio.

Any insights on what might be causing this discrepancy?

You can experiment with a JSFiddle I've set up at the following link: https://jsfiddle.net/n90ty8ys/1/

<svg id="svg-main-panel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 432" preserveAspectRatio="xMinYMin meet" width="1120" height="630">
  <rect xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="200" height="200" fill="blue"></rect>
  <svg width="20" height="40" x="20" y="20">
    <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="657.247" y1="172.823" x2="657.247" y2="152.907" gradientTransform="rotate(90 405.13 -232.117)">
      <stop offset="0" stop-color="#BDCCD4"></stop>
      <stop offset=".5" stop-color="#EBF0F2"></stop>
      <stop offset="1" stop-color="#BDCCD4"></stop>
    </linearGradient>
    <path fill="url(#a)" d="M20 0H.034L0 40h19.966"></path>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" x="20" y="60">
    <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="19.775" y1="30" x2="-.14" y2="30">
      <stop offset="0" stop-color="#BDCCD4" />
      <stop offset=".5" stop-color="#EBF0F2" />
      <stop offset="1" stop-color="#BDCCD4" />
    </linearGradient>
    <path fill="url(#a)" d="M-.034 20h20v20h-20z" />
    <linearGradient id="b" gradientUnits="userSpaceOnUse" x1="-1207.701" y1="556.747" x2="-1207.701" y2="576.663" gradientTransform="matrix(0 -1 -1 0 576.556 -1188.2)">
      <stop offset="0" stop-color="#BDCCD4" />
      <stop offset=".5" stop-color="#EBF0F2" />
      <stop offset="1" stop-color="#BDCCD4" />
    </linearGradient>
    <path fill="url(#b)" d="M0 40l19.966-20L20-1H0" />
    <linearGradient id="c" gradientUnits="userSpaceOnUse" x1="-847.237" y1="1808.924" x2="-847.237" y2="1828.84" gradientTransform="matrix(-1 0 0 1 -826.737 -1788.733)">
      <stop offset="0" stop-color="#BDCCD4" />
      <stop offset=".5" stop-color="#EBF0F2" />
      <stop offset="1" stop-color="#BDCCD4" />
    </linearGradient>
    <path fill="url(#c)" d="M41 40V20H19.934L0 40h19.968" />
  </svg>
</svg>

htmlcsssvg

Answer №1

Latest Updates

Initially, I believed that the viewBox and svg had varying ratios, but it turns out they were actually the same. I have made the necessary adjustments in point #2 below.

I've identified two possible issues:

  1. The <path> elements contain decimal numbers in the d attribute. Since browsers render units as pixels (whole numbers), this may cause misalignment of your SVG elements. In the code snippet below, I have converted all decimal numbers in the d attributes to integers. For example, I changed 

    <path fill="url(#c)" d="M41 40V20H19.934L0 40h19.968" />
    to 
    <path fill="url(#c)" d="M41 40V20H20L0 40h20" />
    .

  2. The size and ratio of your base <svg>'s viewBox are different from the values set for the width and height attributes. The discrepancy between the viewBox width and height (768 and 432, respectively) and the <svg> dimensions (with width="1120" height="630") can lead to unexpected skewing of the SVG and potential rendering issues due to decimal-based alignment discrepancies in browsers. With a 1:1.46 ratio between viewBox and <svg> size (1120/768), there is a possibility of misaligned elements. Refer to Sara Soueidan's insightful article on configuring viewBox numbers for more guidance.

I have implemented these changes in the code snippet below, and it appears to be functioning correctly. Best of luck!

<svg id="svg-main-panel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1120 630" preserveAspectRatio="xMinYMin meet" width="1120" height="630">
  <rect xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="200" height="200" fill="blue"></rect>
  <svg width="20" height="40" x="20" y="20">
    <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="657.247" y1="172.823" x2="657.247" y2="152.907" gradientTransform="rotate(90 405.13 -232.117)">
      <stop offset="0" stop-color="#BDCCD4"></stop>
      <stop offset=".5" stop-color="#EBF0F2"></stop>
      <stop offset="1" stop-color="#BDCCD4"></stop>
    </linearGradient>
    <path fill="url(#a)" d="M20 0H0L0 40h20"></path>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" x="20" y="60">
    <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="19.775" y1="30" x2="-.14" y2="30">
      <stop offset="0" stop-color="#BDCCD4" />
      <stop offset=".5" stop-color="#EBF0F2" />
      <stop offset="1" stop-color="#BDCCD4" />
    </linearGradient>
    <path fill="url(#a)" d="M0 20h20v20h-20z" />
    <linearGradient id="b" gradientUnits="userSpaceOnUse" x1="-1207.701" y1="556.747" x2="-1207.701" y2="576.663" gradientTransform="matrix(0 -1 -1 0 576.556 -1188.2)">
      <stop offset="0" stop-color="#BDCCD4" />
      <stop offset=".5" stop-color="#EBF0F2" />
      <stop offset="1" stop-color="#BDCCD4" />
    </linearGradient>
    <path fill="url(#b)" d="M0 40l20-20L20-1H0" />
    <linearGradient id="c" gradientUnits="userSpaceOnUse" x1="-847.237" y1="1808.924" x2="-847.237" y2="1828.84" gradientTransform="matrix(-1 0 0 1 -826.737 -1788.733)">
      <stop offset="0" stop-color="#BDCCD4" />
      <stop offset=".5" stop-color="#EBF0F2" />
      <stop offset="1" stop-color="#BDCCD4" />
    </linearGradient>
    <path fill="url(#c)" d="M41 40V20H20L0 40h20" />
  </svg>
</svg>

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

The Challenges of CSS Specificity in Multiple Browsers

I am using this as an opportunity to learn, so I appreciate if you can refrain from telling me what not to do and instead help me understand the concepts. What I am trying to achieve here is comprehension. Here is a sample of CSS code: input[type="file"] ...

htmlcsscross-browser

Tips for disabling default browser input validation in React

https://i.stack.imgur.com/834LB.png Is there a way to remove the message "Please fill out this field" while still keeping the "required" attribute intact? I have my own validation system in place, so I need to use the "required" attribute to determine whe ...

javascripthtmlcssattributes

React's struggle with implementing flexbox functionality

Struggling to implement a calculator using React and flexbox, but running into issues with my flexbox layout. I've attempted to troubleshoot using the Chrome Dev Tools but haven't made any progress. import React, { Component } from "react"; imp ...

cssreactjs

Bootstrap allows for word wrapping on either one or three lines

I am currently utilizing Bootstrap 3 for my website, and I have a sentence composed of three parts at a certain point on the page. For example, it might read "Bud Spencer walks with Terence Hill." where X="Bud Spencer", Y="walks with", Z="Terence Hill." T ...

htmlcsstwitter-bootstrap

Issue with Bootstrap 3 Modal: Missing Title and Input Labels

I'm currently working on customizing a bootstrap template for my friend's church website. My goal is to create a simple web presence for them, and I am in the process of setting up a contact form. I want this form to appear as a modal where users ...

javascriptjqueryhtmlcsstwitter-bootstrap

The appearance of the website varies across different web browsers

My current project involves creating a portfolio showcasing my work, but I've encountered an issue: When you visit my website and click on the "About" link, the text at the bottom of the tab is displayed differently in Chrome compared to IE and Firef ...

jqueryhtmlcsscross-browser

Tips on how to navigate to the end of a div that has been created through ng-repeat in Angular JS with the

Here is the template code I am working with: <div class="chatbox" id="mailBody" > <div class="panel-body" ng-repeat="mail in mails"> <div class="m-b-none" ng-if="mail.inboxMessageType == 1"> <a href class="pull-left ...

javascriptjqueryhtmlcssangularjs

Closing the video on an HTML5 player using an iPad

My task is to incorporate a video into a website with a button to close and stop the video. Once closed, an image will appear below. Everything works perfectly on all browsers. The issue arises on the iPad... On the iPad, the "close" button does not wor ...

javascriptjqueryipadhtml

What could be causing my page to suddenly disappear?

After saving my changes in the IDE and refreshing the browser to test the prompt() function in my index.js file, the entire page goes blank, showing only a white screen. I double-checked the syntax of my function and it seems correct. Everything else on th ...

javascripthtmlcssreactjs

Waiting for response in AngularJS Controller and setting callback

I have developed an AngularJS application with controllers.js and factories.js that I am excited about. However, I am facing a challenge when trying to manipulate the values within the controller (retrieved from the factories). The issue is that these val ...

javascripthtmlangularjs

The selection feature is not supported for the type of input element in jQuery

I'm currently attempting to utilize AJAX to send a form with jQuery. However, upon clicking the submit button (which is technically a link), I encountered an error. The error displayed in the console is as follows: Failed to read the 'selection ...

javascriptjqueryhtmlajax

Is it possible to combine margin auto with a transform on the left simultaneously?

While examining a webpage, I noticed a positioning issue and decided to remove some CSS code to determine the root of the problem. It appears that the navbar has a 1px gap on the left side from the edge of the screen. After removing the last two lines of c ...

css

Developing an HTML table with the power of JavaScript and JSON

I am having difficulty creating an HTML table using JavaScript with JSON input. In my code, I'm using a placeholder in the HTML that will be filled by a innerHTML call in Javascript: for (var i = 0; i < json.data.length; i++) { listItem = json. ...

javascripthtmljson

What is the best way to include a dialog div within a form tag?

I am facing an issue with a JQuery dialog on my webpage. The data entered into the dialog seems to get lost because the dialog is placed outside the form tag. Here is how it appears: https://i.stack.imgur.com/fnb07.png So far, I have attempted this soluti ...

javascriptjqueryhtmlformsdialog

Retrieve input value in Angular 8 using only the element's ID

Can the value of an input be obtained in Angular 8 with TypeScript if only the element's id is known? ...

htmlangulartypescript

Using jQuery to create a dynamic fullscreen background image that responds to mouse movement

I am currently working on creating a dynamic full screen background that responds to the movement of the mouse. The idea is that as you move the mouse around, the background image will shift accordingly. For instance, if you were to move the mouse to the ...

jquerycssbackgroundviewport

Modifying the color of a specific div using jQuery

I am attempting to develop a function that changes the background color of a div when a user clicks on it and then clicks on a button. The value needs to be saved as a variable, but I'm having trouble getting it to work because it keeps saying that th ...

javascriptjqueryhtml

Command field in Javascript

I've crafted an exquisite search box for my website, but I'm struggling to make it functional and display search results. Below are the Html and CSS files pertaining to this section of my site: .searchbox{ /*setting width of the form eleme ...

javascripthtmlcsssearch

Do not apply tailwindcss styles to Material-UI

I've been struggling to apply styling from tailwindcss to my MUI button. My setup includes babel and webpack, with the npm run dev script as "webpack --mode development --watch". tailwind.css module.exports = { content: ["./src/**/*.{js, jsx, t ...

javascriptcssreactjsmaterial-uitailwind-css

Unlocking the power of dynamic text using a single form

My comment reply system is experiencing an issue where the first reply works fine, but subsequent replies are unable to get the reply text value. How can I ensure that all replies work properly based on the Razor code provided below? <h4>Comments< ...

javascriptjqueryhtmlajaxasp.net-mvc