CODEWITHSUNDEEP
phphtmlwordpressgoogle-chromesvg
HulaHoof
HulaHoof

Reputation: 399

Chrome svg displaying with scrollbars on some elements

strong textI found some similar questions, although most of the answers are applied to loading .svgs directly, and forcing them to display block. I load my .svg as a background image to a blank.gif window of the desired image size.

In the last few days (only in chrome), some of my svg's are being cut off by scrollbars that appear with the svg background property, but disappear when the fallback .png is loaded.

Does anyone know what the cause may be?

EDIT:: Oddly enough, while this is not working on my normal chrome at home or work, it IS working in my chrome(beta) version. I tried resetting my chrome://flags to default on normal chrome - but the issue still persists.

EDIT 2: Following answer below (Illustrator adding overflow="scroll" to some svg files), the code to remove is at the top here, between viewBox and xml:space:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     x="30px" y="30px" viewBox="0 0 30 30" overflow="scroll" xml:space="preserve">

Upvotes: 1

Views: 586

Answers (1)

Steve Schrab
Steve Schrab

Reputation: 395

I've had this had this problem too. I save most of my SVG files from Adobe Illustrator. For whatever reason it tacked in overflow="scroll" in the SVG tag on a few of my files. Removing this fixed the problem for me.

Upvotes: 2

Related Questions