I'm using an SVG object embedded in HTML using the tag. The SVG gets painted with a white background. How can I get rid of it and make the element transparent so that the HTML background shows through.
There is supposed to be a way to do this in IE with Adobe's SVG viewer using the wmode attribute. How do I do this in WebKit or Mozilla?
Only webkit-based browsers fail to use a transparent background for <object> elements that reference svg in my experience. See for example the upper-right corner svg on my experimental site, http://dahlström.net/. Opera and Firefox work just fine without anything special needed, just view source and see.
Have a look at A List Apart's article on SVG backgrounds.
Related
I made a stacked svg sprite and I want to show the svg's in a img tag and I want to use it in my css files.
I'm embedding the images like this:
<img src="http://markputs.nl/sprite/sitesprite.svg#audio">
and http://markputs.nl/sprite/sitesprite.svg is the svg.
(sorry that I need to link to the svg but I think it might be important to have the entire file)
I found some old topics at this site where the issue could be resolved by serving the svg as an actual svg but I'm already serving it as an actual svg (file type).
I have no idea how to fix this, is there someone that can help me in the right direction? It's working on all major browsers except ios browsers..
I have no clue what happened, I created an svg image in illustrator, saved it, posted it to my wordpress site, and everything was good to go.
((Its upposed to show under the text box on this page.
I resized the screen, the image disappeared, and now no matter what i do, it will not show.
Furthermore, The problem appears to be limited to Chrome, Ive tried creating multiple other svg images, and none of them will show at all on chrome whereas all of them work on other web browsers.
I've also added code to my htaccess, still no luck. i knew that wouldn't work because ive posted svg's to my wordpress site before with no problem...
my illustrator settings are as follows:
svg profiles: svg 1.1
fonts type: convert to outline
image location: embed
advanced options - css properties: Presentation Attributes
Decimal places: 5, unicode 8
-responsive box checked
///////
Here's a google docs link to the svg code
SVG CODE - Google Docs
EDIT** Now the images aren't showing up in any browsers, i haven't changed anything.
If you examine the <img> element in your browser dev tools you'll see the problem. The browser is sizing the <img> for the SVG at (0 x 0).
Here's the relevant HTML from your page:
<img src="https://makerstrunk.com/wp-content/uploads/2015/04/coursetrunksample1.svg"
class="mpc-transition attachment-full" alt="coursetrunksample1">
You haven't sepcified a width and height here. But you have for the PNG versions of the image you have included on the page. Normally, in HTML, images default to the natural/intrinsic size of the bitmap. But SVGs don't always have those values. And yours doesn't. Check the contents of the SVG. You'll see it has no width or height.
If you add width and height to your <img> tag, all will be well.
<img src="https://makerstrunk.com/wp-content/uploads/2015/04/coursetrunksample1.svg"
class="mpc-transition attachment-full" alt="coursetrunksample1"
width="300" height="250">
I'm aware that an iframe can't inherit the css styles of the "main" webpage, but if so I am confused. I have a main page whose background is plain black, with white text. The iframe doesn't have a background colour specified and yet it is black, the same as the main page. However, other css properties in the main page have to be defined separately for the iframe if I want them to be used. Why is this?
If you do not set the background of an HTML document (by setting it on its html element or its body element), the browser default will be used, and it can be expected to be the initial value, transparent.
This means that for a page embedded in another page with the iframe element, you can expect the background of the embedding page to shine through.
You can use Developer Tools to figure out where the black background is coming from. (It's built into the browser.)
If you are using IE or Chrome, you can just press F12 on your keyboard and then use the element selector (top left) to select the IFrame. On the left you will then find all the CSS styles that are applied on that IFrame.
This will give you an insight on what's happening and also give you a new priceless tool to debug in the browser.
Note: If you use firefox, you will need to install firebug.
This can also come useful.
Precedence rules in CSS (1 is most Precedent):
User defined style
Embedded or inline style sheet
Internal style sheet
External style sheet
Browser default style
This may be Firefox specific. See here and here.
I can't get the SVG Image to disaply correctly in Google Chrome 34
Example
As you can see object and iframes are working. IMG and Backgroudn image aren't working.
IE11 and FireFox can display all 4 examples correct.
The Chrome developers have chosen not to support the use of SVG fragments in images in order to protect user's privacy.
Because your SVG file only displays each shape if it is the target of a URL fragment (the part after # in the filename), nothing is displayed when Chrome strips out the fragment.
I have an image that is sitting on top of a background. In Firefox and Chrome it looks fine as per below:
But in Internet Explorer (any version), it looks like the image background is a different shade than the background (I have put a red box to highlight where the image ends and the background begins, but it's pretty obvious).
How could it be that, given the same image and the same HTML background color, one browser looks fine but in Internet Explorer it looks like the colors are off as the background color of the image is a shade lighter than the HTML background?
The full website is here if that helps.
I think you have different image formats, and Internet Explorer got some image rendering problems. Try to put both of the images background and logo (back-page1.png, logo5.gif) in the same format either GIF or PNG (I prefer PNG) and it should do the trick!
Good luck :)
UPDATE:
So what is this render issue?
As tenfour said in comment, "assuming that the RGB color is really the same on both images, the underlying problem is that Photoshop saves gamma information in the PNG which causes Internet Explorer to render a different color than desired".
I think you need to remove the gamma information in the PNG. See http://morris-photographics.com/photoshop/articles/png-gamma.html for an explanation of this problem. I use http://www.choppng.com/ to remove this section from the PNG.