Discrepancy in the vertical pattern repetition of the SVG background

When I use a simple div with an SVG set as a background image with vertical repeat, I noticed a gap of varying sizes on Chrome and Firefox depending on the screen size (please resize the window).

Check out the issue here

.bg {
  width: 50%;
  height: 2000px;
  display: block;
  background-repeat: repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='272' height='171' viewBox='0 0 272 171'> <rect class='cls-1' width='272' height='171' fill='green'/></svg>");
}
<div class="bg"></div>

Can anyone explain why this is happening?

htmlcsssvg

Answer №1

The reason for this issue is a combination of using background-size:contain with the pixel dimensions of your svg.

What you are observing is the browser trying to proportionally scale the image to fit within the boundaries of your <div>. Since the image pixel dimensions are 171 (not evenly divisible into 2000px), you are seeing subpixels displayed as lines.

To resolve this, simply remove the background-size:contain property.

Additional Information:

If you absolutely require the containment of width, there are some tips to achieve a better outcome:

  1. Ensure the background image dimensions are multiples of 10, ideally in a square shape like 100x100px or a rectangle close to your desired width, such as 1000x100px.

  2. Use background-size: 100% auto instead of contain to stretch the image proportionately to fill the container width.

  3. Apply background-repeat: repeat-y to force a vertical repeat and reduce the strain on the browser's calculations to just one axis.

Answer №2

The issue lies in the realm of subpixel rendering. Every browser handles rounding differently and SVG subpixel rendering can be quite chaotic.

My recommendation is to adjust your SVG content to be slightly larger than your viewbox.

<svg xmlns='http://www.w3.org/2000/svg' width='272' height='171' viewBox='0 0 272 171'>
  <rect class='cls-1' y='-.5' width='272' height='172' fill='green'/>
</svg>

While this trick may not be applicable to all background SVGs, it could prove beneficial in your specific scenario.

Answer №3

Regrettably, the most effective resolution for addressing this problem was to transform the SVG into a raster format such as JPG. Evidently, web browsers handle pixel scaling without issues, but encounter complications at the edges when scaling vector-based formats.

Answer №4

If you're okay with sacrificing some anti-aliasing quality in your SVG, you have the option to adjust the anti-aliasing level of the shapes within the SVG by utilizing the shape-rendering property. For instance:

<rect shape-rendering="crispEdges">

This technique can be applied to various elements such as: 

<circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect>
.

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

unable to interpret information

I've encountered an issue with posting data to my webpage (page3.php). Despite using $test=$_POST['radio_second']; on the page, the test variable remains empty. Any help in resolving this would be greatly appreciated. Thank you! <p> ...

phphtml

Loads a PHP file automatically using the URL from a jQuery Ajax method

Using the jquery ajax method, I am trying to populate a dropdown menu with a set of option values from my title.php file. However, upon loading the page, in the Chrome Android browser, it redirects to the title.php. Does anyone have any insights into what ...

phpjqueryajaxhtmlforms

Having trouble getting the Facebook like button to display on my website using an iframe in the markup

I gave it my all to try and get it to work, but unfortunately, I was unsuccessful. This is the approach I took. First, I followed the instructions provided on https://developers.facebook.com/docs/plugins/like-button. Next, I copied and pasted the iframe ...

javascripthtmlfbmlxfbml

Issue with alignment in Bootstrap5 - ms-auto not functioning correctly in row and column components

My goal is to make the button move to the right side of the screen within the row element. I initially placed the text and button in separate column elements, and then attempted to use ms-auto on the second column element to align it to the right, but for ...

htmlbootstrap-5

Utilizing Emotion CSS to incorporate images into buttons

I'm trying to add some style to two buttons, Up and Down, by using emotion CSS but I'm having trouble. Currently, I typically style my elements within a function. Is there a way for me to accomplish this with emotion CSS? I checked out but still ...

cssreactjstypescriptemotion

Use Angular and JavaScript to fetch HTML from a mySQL database and dynamically render it on a webpage

I'm currently utilizing Angular for the front end and Node for the back end. The data is retrieved from a MySql database where it's manually stored in text format with HTML tags. For example: <ul> <li>item1</li> <li> ...

javascriptmysqlangularjsjsonhtml

How can I conceal text using css in specific situations without risking a penalty from search engines?

Currently, I'm developing an illustration tool that needs to be visually appealing to users, while also being accessible to screen readers and search engines. Below is the HTML code I'm working with: <span class="card">A new idea is presen ...

htmlcss

Is it possible to import the identical file twice consecutively using html and typescript?

I encountered an issue with an input element in my HTML file. Here's what it looks like: <input type="file" (change)="receiveFile($event)" id="inputFileButton" hidden /> This input element is designed for users to import files. Wh ...

htmltypescript

Verify whether an accordion is in the open or closed position

I am trying to determine if an accordion item is currently open or closed in Framework7. Can anyone provide guidance on how this can be accomplished? To open an accordion item, I have been using the following code: myApp.accordionOpen(".accordion-item"); ...

htmlhtml-framework-7

Ways to make an area map more transparent

I'm encountering an issue with HTML opacity... Currently, I've implemented opacity using CSS but it's not functioning correctly. Below is my HTML and CSS code: <area shape ="rect" class="transbox" coords ="0,0,30,22" href ="test1.htm" ...

htmlcssopacity

I want the navigation bar to appear only upon scrolling, but when I refresh the page it is already visible, and then vanishes as I start scrolling

I'm working on a project where I want the navigation bar to only appear after scrolling a certain distance down the page. However, I've noticed that when I refresh the browser, the navigation bar appears immediately and then disappears once I sta ...

javascripthtmlcssnavigationbar

Employing jQuery for adding a class to the initial TD in every table row

Currently, I am dealing with a table structured like this: <table width="100%" border="0" cellspacing="0" cellpadding="0" id="tablecontent"> <tr class="tablerow"> <td>This is the td I want to add a class to.</td> <td c ...

jqueryhtmlcssclasshtml-table

What are the methods for differentiating between a deliberate user click and a click triggered by JavaScript?

Social media platforms like Facebook and Twitter offer buttons such as Like and Follow to allow users to easily engage with content. For example, on Mashable.com, there is a Follow button that, when clicked, automatically makes the user follow Mashable&ap ...

javascripthtmlfacebook

Transfer an HTML file object between two <input type="file"> elements

I am looking to integrate a multi-file uploader into a form that allows users to prioritize the files they upload using draggable and sortable jQuery tools. One way I have added a multi-file input is: <input type = "file" multiple> When I select m ...

javascriptjqueryhtml

The media query for mobile is not functioning properly

Hello, I have a page with MVC that includes CSS for iPad and mobile devices. The media query for iPad (@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)) works perfectly, but I am struggling to get the media query for mobile ...

cssmobilemedia-queries

The link generated through ERB using link_to cannot be clicked on

When using the ERB link_to helper method to generate a hypertext link to an individual article, I am encountering an issue where the link appears as clickable in the view but is not actually clickable (the cursor does not change to a pointer). I have atte ...

htmlcssruby-on-railsruby

Understanding the percentages of CSS in relation to other elements

Can you define a CSS dimension in a percentage relative to an element other than its parent? Specifically, I want the border-radius of a div to be 10% of its width. However, using border-radius: 10% creates an elliptical border when the height and width ...

csslayout

What is the importance of setting height: 0 when flex-basis: 0 is already defined in CSS3 flexbox?

I am currently working on creating a content reader with a fixed size and title that remains visible while scrolling. I attempted to achieve this using CSS3 flexbox with the following structure: .flex { display: flex; flex-direction: column; ...

htmlcssflexbox

Unlimited Lunch Options and Navigational Links

Looking for help with displaying the ul for MAINTENANCE and referencing specified classes from a CSS style sheet that are working elsewhere. However, the sub menu for MAINTENANCE is not showing up. Any suggestions? /* * Superfish v1.4.8 - jQuery menu w ...

javascripthtmlcss

creating an animated loop within an Angular template

How can we display a dynamic loop in Angular template using an array of object data? [ { "name": "name", "text": "text", "replies": [{ "name": "Reply1", "t ...

javascripthtmlangular