So, I have an SVG path animated with CSS animation. This animated SVG is set as a background image of the div. The issue is that when I refresh the page, CSS background-image gets cached which leads to animation not getting executed but it shows the final fully displayed SVG. I have checked out the solutions from other users by getting random strings. This solution works by creating random strings on each refresh. In my case, I can't use any scripts. So, is there any way around this besides putting my SVG in HTML file? Thanks
Related
I’ve got a tricky issue going on that I can’t seem to figure out. It’s a lot of different files so let’s start without any code or file docs added.
So I’ve got a SVG image with a lot of square paths all over it. I placed an Square image over one of the square paths in Inkscape. Then I embedded the SVG file into HTML, where I think added a link to that path w/ image. I was having no issues adding the links or anything and it was working just fine, but now it seems as if the image is canceling out the link. Before the link worked just fine but when the image loads over the square it acts as if it’s covering the link. Before the image is fully loaded into the browser the link works and is accessible. But once the image loads on top of that path with the link it covers it and doesn’t work anymore.
Is this common and am I dumb? Seems like I’m just missing something here. Need to basically add the image somehow without it covering the linked path underneath.
Please help!!!
You have probably already found the answer. In SVG all elements are drawn on top of all previous (so the order of the elements in the file matters).
If one element completely covers the other below him then it will essentially block its interactive events. The solution is to notify CSS engine to drop through any pointer events for this element (or elements with same style) using
.nopointer { pointer-events: none }
in the section of the SVG or in the wrapped HTML CSS style section.
For the links to work for SVG elements - since you can add a link attribute to SVG elements as well, e.g. if you would have SVG IMAGE elements overlaid on your rectangles - don't forget to add the XLink namespace in the SVG root element declaration.
I get strange behavior when I try to insert icons to my elementor page design in SVG format.
This is the original design (supplied with zeplin.io) which im trying to implement with elementor
before I add the last icon, the result in elementor is:
You can see that only the first icon display as expected
Which is strange, but even more strange is that when I had the last I con I get this:
Now non of the icon display as expected, although some of then are more similar to the expected result.
The heart icon got flipped, and the colors changed for the other icons,
Why would adding a new icon effect other icons in such a way?
Why the color and the icon direction doesn't display as set by the SVG design?
NOTE, the direction might be RTL related, but why only the heart got flipped?
I know that I could easily solve this issue by changing the format to PNG, but I could like to understand the reason behind this behavior.
This is happens because the icons have duplicate class values, i.e. the svg is added as-is to the dom tree, along with the <style> definitions.
Therefore any class or id that is duplicated in two SVGs will collide, and the solution is
open the svg with any text editor
search/replace all id/class defined in <style> to have unique name
NOTE: the reason it doesn't happen in the orginial design is that there, the SVGs are added with img tag.
Woprdpress doesn't allow uploading SVGs as images for security reason (I have no idea what kind of security issue it can create, but this is a question by itself)
EDIT: I just noticed that once you add an SVG as an icon, it also become available as an image, so it might be a better solution to upload the SVG as icon and then use them as images. but I didn't try it.
I just noticed that in chrome, if there are external resources to load like the background-image attribute, it delays the loading of the entire rest of the style sheet. Its really rather annoying since it causes the page to flicker even when loading just 4kB worth of images from localhost.
I could possibly work around it on any other page by placing image references at the end of my css but this particular page is too dependent on textures, it still looks bad.
This doesn't happen to images included directly in the loaded HTML like < img > tag or background images with inline CSS. Since I'm on asp.net, I could have the css inlined into the response but this would come at the cost of bandwidth.
Is there any other way to get around this?
It seems to me that if the only reference to my sprite image is in the css, then those two files can't be downloaded in parallel. First it would have to download the css file, THEN it would know it needed the sprites file, and it could begin to download the sprites. Would it be faster to include a little inline css that referenced the sprite image so that the two could be fetched in parallel?
If your sprite is used using javascript, then use javascript to load your sprite that way you can ensure that nothing can be done with the sprite until it is actually loaded.
If you are using css3 to use the sprite then use either css or html.
By html I mean you can include the image on your actual html file with a width and height of 1px. This ensures that the image is loaded as well.
As far as performance goes it wouldn't really make a noticeable difference. Albeit using css3 would ensure that all users of your website would have the same experience, whereas using javascript would only get the benefit if javascript was turned on.
We had the same issue in a project at work, a not-so-pretty solution was to add an img tag with the sprite as a src just after the opening body tag.
If your sprite is small enough you could also use a data URI (data URIs on CSS-Tricks), but then you'll have to use one selector for the background-image and additional selectors for the background-image-position, so you wont have to include the data URI on every selector.
I have a div (.header) contained within other divs. When my page loads, momentarily just that one .header div "flashes" white as the page is loading, especially in in Firefox, but a little bit in IE8 too. I can't find what kind of CSS or lack thereof is causing this - there's no images or background color associated with that div. There is a logo.png within the .header. Thoughts?
http://dev.bwmsnow.co.nz/
From what I can see (Firefox on XP) it doesn't so much flash as it looks like it is slow to load the header-container div, and the associated background images. If I load without cache the whole of the logo bar loads last (and is white before load), but not just the one div. YSlow counts some 50 HTTP requests which might explain some of it. It doesn't look like the page is large so much as made up of a lot of pieces that probably create some processing lag.
If I understand the question, my suggestion is an old trick of adding a background color similar to the background image to <div class="header"> so that as the page loads (but before the image loads) the user sees a color similar to the background image. That way the visual impact of the image loading is not as noticeable.
I Photoshop eye dropped your background image and suggest using #a1dff8 as the color. The CSS for should be:
.header{
background:#a1dff8 url('images/yourheader.png');
}
Also, when looking at your code, I see that you have several external JS files. You should consider a minifier. Just Google or StackOverflow for JS/CSS minification.