Html Question posted in
Some basic documentation can be found here.

Html – Appearance of svg object in mobile view is different from desktop view

body {
  margin: 0vh 0vw;
}

.header {
  position: relative;
  width: 100%;
  height: 12vh;
  background-color: #004d40;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  top: 0;
}

.line {
  position: absolute;
  left: 0;
  top: calc(50%);
  width: 100%;
  height: 0.25vh;
  background-color: white;
  z-index: 1;
}

svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 2;
}
<!DOCTYPE html>
<html lang="tr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Header with Half Circle</title>
</head>

<body>

  <div class="header">
    <div class="line"></div>
    <svg width="10vw" height="5vh" viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
        <path d="M0,0 A50,50 0 0,0 100,0" fill="#004d40" stroke="white" stroke-width="3"/>
    
    </svg>
  </div>

</body>

</html>

Hello, when the svg object goes to mobile view, the svg gets distorted and a gap occurs between the semicircle and the line. Why is this caused and how can we solve it.

on dekstop:

enter image description here

on mobie emulation:

enter image description here

Expected Result:

I was expecting it to look the same on mobile as on desktop.

Tags:

3

Answers


  1. 0

    Avoid using vh in mobile.
    100vh in mobile contains the height of browser’s navigation bar, elements using vh to define height may have a different appearance from the desktop.

    Login or Signup to reply.
  2. 0

    By default the SVG is trying to fit and align the lines into the center of the viewBox (or viewport) it is given. You can control this behavior with the preserveAspectRatio attribute on the <svg> element.

    In the example below I’ve used the value xMidYmin meet which translates to:

    • Align the x axis middle point of the path to the middle point of the view box.
    • Align the y axis middle point of the path to most upper point of the view box.
    • Preserve the aspect ratio and make sure everything is visible within the view box. (similar to how background-size: contain works.
    body {
  margin: 0vh 0vw;
}

.header {
  position: relative;
  width: 100%;
  height: 12vh;
  background-color: #004d40;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  top: 0;
}

.line {
  position: absolute;
  left: 0;
  top: calc(50%);
  width: 100%;
  height: 0.25vh;
  background-color: white;
  z-index: 1;
}

svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 2;
}
    <!DOCTYPE html>
<html lang="tr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Header with Half Circle</title>
</head>

<body>

  <div class="header">
    <div class="line"></div>
    <svg width="10vw" height="5vh" viewBox="0 0 100 50" preserveAspectRatio="xMidYMin meet" xmlns="http://www.w3.org/2000/svg">
        <path d="M0,0 A50,50 0 0,0 100,0" fill="#004d40" stroke="white" stroke-width="3"/>
    </svg>
  </div>

</body>

</html>
    Login or Signup to reply.
  3. 0

    SVG that is subtly cut also seems to need to be modified.

    You have to be sensitive to the use of the unit.

    And please check this. It will be helpful.
    How to use the <svg> viewBox attribute?

    body {
  /* margin: 0vh 0vw; No need unit for zero */
  margin: 0;
}

.header {
  position: relative;
  width: 100%;
  height: 80px;
  background-color: #004d40;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  top: 0;
}

.line {
  position: absolute;
  left: 0;
  /* top: calc(50%); No need calc */
  top: 50%;
  width: 100%;
  /* height: 0.25vh; If you use viewport height, The height of the device changes the thickness of the intended line */
  height: 1px;
  background-color: white;
  z-index: 1;
}

svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 2;
}
    <!DOCTYPE html>
<html lang="tr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Header with Half Circle</title>
</head>

<body>

  <div class="header">
    <div class="line"></div>
    <svg width="100" height="50" viewBox="0 0 100 100" preserveAspectRatio="xMidYMin meet" xmlns="http://www.w3.org/2000/svg">
        <path d="M0,0 A50,50 0 0,0 100,0" fill="#004d40" stroke="white" stroke-width="3"/>
    </svg>
  </div>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search