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>

https://i.sstatic.net/CggAr.png

https://i.sstatic.net/WXBS7.png

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

Designing Post Archive with Flexbox to create dynamic layouts

I am currently exploring different techniques to style my columns, and I have encountered an issue where if there are less than 4 posts in a row, there is extra space between each post. While I understand that floats can resolve this problem, I am searchin ...

phphtmlcsssassflexbox

What is the best way to align elements in relation to a central div container?

Is there a way to align two buttons in the center on the same line, and then position a selector to the right of those centered buttons? How can I achieve this arrangement? Essentially, how do you position an element in relation to a centered div? UPDATE: ...

htmlcsscentering

Activate scroll function exclusively upon hovering over specific object

I am working on a page with an object that allows users to zoom in and out. I want to create a special zoom function that will be triggered when the user scrolls while their cursor is hovering over this object. If the cursor moves away from the object, th ...

javascripthtmlscroll

Designing Checkboxes and Radio Buttons

I am seeking a way to customize the appearance of checked and unchecked checkboxes using images without modifying the HTML structure. I would prefer not to add labels, classes, or IDs to the elements. The provided example only works in Webkit browsers, s ...

javascriptjquerycsscheckboxradio-button

Clicking on the menu in mobile view will cause it to slide upward

I have implemented sticky.js on my website and it is working well. However, when I resize the browser to mobile view and click the main menu button, it goes up and I am unable to close it. I have to scroll up to see it again. How can I make it stick to the ...

javascriptjquerycssresponsive-design

The PHP code I wrote will be executed on the subsequent HTML page, not the one currently being displayed

I have a school project where I am creating a quiz-game web page. Each question will have 4 possible answers. The questions, along with their 4 answer choices and the correct answer, are randomly selected from a database. However, I am facing an issue w ...

phphtmlmysql

Django No Reverse Match Error - All Functions Are Failing

After spending countless hours troubleshooting, I have encountered an issue where the HTML form action in a newly rendered page is causing the page not to load properly. Surprisingly, this specific line of code seems unrelated to the rendering process itse ...

pythonhtmldjangojinja2

How to Implement Autoplay Feature in YouTube Videos with React

I'm having trouble getting my video to autoplay using react. Adding autoplay=1 as a parameter isn't working. Any ideas? Below is the code I am using. <div className="video mt-5" style={{ position: "relative", paddingBot ...

javascripthtmlcssreactjsyoutube

A guide to adjusting the width without affecting the td element

Currently, I am facing a challenge while coding in HTML. I am trying to create a table with a header (time range) that fits on a single line without affecting the width of the td elements. Below is the code snippet: <table style="border:1px solid #8c ...

htmlcss

Utilize jQuery to apply a CSS class to the element that is clicked and inject additional content into a designated div

Here is a link to a page where I am experimenting with creating an interactive choose-your-own-adventure story: My goal is to add the class "disabled" to the element when a user clicks on the word "stairs" and then continue the story. Below is the relevan ...

jqueryhtmlcss

Jquery Triggers Failing to Work Following Ajax Request

I have worked on 2 PHP pages, called "booking.php" and "fetch_book_time.php". Within my booking.php (where the jquery trigger is) <?php include ("conn.php"); include ("functions.php"); ?> $(document).ready(function(){ $(".form-group"). ...

javascriptphphtmljqueryajax

Subject line matches webpage header

Is it possible to automatically generate an email subject that includes the title of the webpage from where the user is sending an email? For instance: If my webpage's title is "About Us," Can the email subject be "About Us" as well? I am not very ...

phphtml

Uniqid in React fails to generate unique IDs

Currently working on creating my first react project and developing a todo list. I have incorporated the uniqid generator into my todo object, but it seems to be returning an empty id rather than a random one. Oddly enough, if I move the todo state outsi ...

javascripthtmlcssreactjs

What steps should I take to ensure that elements beneath a div are made visible?

I've been working on a unique project to create a website with "hidden text" elements. One of the cool features I've developed is a circular div that follows my mouse cursor and flips all text below it using background-filter in both CSS and Jav ...

javascripthtmljquerycss

Learn the process of adding transformation to an SVG path element

I have an SVG image loaded in my HTML file and I am trying to rotate one of its path elements, but I'm having trouble figuring out how to do it. The code snippet provided below is not working as expected. Can anyone provide guidance on how to achieve ...

javascriptsvg

Embedding PHP code within HTML causing functionality issues

I'm attempting to include PHP within CSS, but the outcome is not what I expected. Instead of displaying the desired results, it's showing me the variable names and an echo statement: <!doctype html> <?php require_once("mysqlconnect.php" ...

phphtml

Picture shown in the sidebar

I'm dealing with a table that has only one row containing text with new-line characters, such as: <td id='line-numbers'> <span class="number" id="1">1</span><br> <span class="number" id="2">123</span>< ...

htmlcss

Obtain offspring from a parent element using jQuery

$(document).ready(function() { $.ajax({ type: "POST", url: 'some/url', data: { 'name':'myname' }, success: function (result) { var result = ["st ...

javascriptjqueryhtmlajaxgetelementbyid

Divs Stacked and Centered

I am currently utilizing the card components from Google's Material Design Lite HTML theme, which can be found at . At the moment, my cards are positioned next to each other and aligned to the left side of the page. I am looking to center the cards o ...

htmlcss

Is it possible to conceal JavaScript comments on a page before it is displayed?

Curiosity has led me to ponder a question that may seem trivial. Consider this scenario: in my HTML or ASPX page, I include a comment for some JavaScript code. When the page loads, will the comments be rendered along with the rest of the page's conten ...

javascriptjqueryasp.nethtmlbrowser