SVG rendering issue in Android Browser

Simon Jentsch Published at Dev

Simon Jentsch

In the default Android Browser for older Android versions (4.1, maybe 4.2/4.3 [It is on the Android device of a customer, i'm not exactly sure which version he uses]) SVG sprites are not rendered correctly. Instead of showing the correct clipping with the correct size, the browser shows a smaller version of the image, showing the whole sprite, like in the screenshot below (Android Browser 4.1):

Android screenshot (false rendering)

it should look like this:

Android screenshot (correct rendering)

Here's the CSS for the sprites:

.sprite {
  display: inline-block;
  background-image: url('img/sprite.svg');
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  overflow: hidden;
  color: transparent !important;
}

.sprite.logo {
  width: 270px;
  height: 55px;
  background-position: 0 0;
  display: block;
}

[...]

Every other Browser (including Android Browser 4.4) shows everything correctly.

Tigran Petrossian

This issue exists on Android 4.3- and IE9. To solve this, simply specify width and height attributes for svg tag in you file.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-14

Comments

0 comments

From Dev

Related Related

Article

SVG rendering issue in Android Browser

SVG rendering issue in Android Browser

SVG Rendering Issue iOS

SVG Rendering Issue iOS

Rendering Issue in Android Studio

SVG WPF C# Rendering Issue

Meteor mongo issue in multiple svg rendering

Android xml rendering issue in eclipse?

WebView Rendering Issue in Android KitKat

Rendering issue for Android with Intellij 13.1.3

Android back button rendering issue

links issue on stock android browser

Android browser rendering half width of html text

HTML5 - SVG issue with rendering an image in IE 11

express svg image element rendering issue in safari/firefox

Rendering issue using Android Studio 0.4.0

Urdu font rendering issue in android 4.1

rendering issue after going to Android Studio 2.1

Layout Rendering issue android studio 0.8.0

Android Drawable (Progress Bar, Switch) rendering issue

Urdu font rendering issue in android 4.1

rendering issue after going to Android Studio 2.1

SVG text element not showing in android browser

android browser scrolling issue in phonegp application

Cross browser d3.js SVG line rendering date sorting

Cross browser d3.js SVG line rendering date sorting

android / chrome web font rendering issue - vertical/width cropping

Browser Incompability - wrong rendering

Browser white space rendering

Browser Incompability - wrong rendering

htmlspecialchars not rendering correctly in browser