I'm trying to figure out the most adapted way to use an SVG (a logo) on a website's header. I want the logo to be clickable, and change color when hovered on.
I've seen theses differents methods : inline SVG, iframe, object,img, embed and as background-image :
I won't use the img and background-image, because I understood you can't modify theses easily (i.e. I can't say "make the image to this specific hue").
iframe and embed seem to be not recommended.
So I looked more closely at inline SVG and object.
I like the conveniency of the inline SVG to modifiy it with CSS, but I'm not a fan of displaying in the gcode how to replicate the logo, and to have a big chunck of code that I would have to modify is the logo changes
I can display the svg with easily, but I haven't found a way to modify the infill with this method.
So my very first question is about the method object : is there a way to modify the proprieties (i.e. fill) of the svg on the go ?
If not, am I just to demanding and I should just stick with the inline svg ?
Cheers,
As illustrated in this topic, using an object isn't quite an easy solution for my problem.
And as #Hoff suggested in the comment, the SVG is the most suitable option for me, and replicating an svg is trivial.
So svg inline it is !
Thanks.
Related
A DOM element with the CSS attributes filter and mask-image has been applied.
If there is a way to save that DOM element as an image while still preserving the functionality of all the applied CSS rules, please let me know.
Unfortunately, the filter and mask-image features are not supported by 'html2canvas' .
Is it currently possible to accomplish this or is there any method to do so?
I think the only way to do this is to take a screenshot. The image you see is a result of an image + some CSS, technically speaking it is not an image but an interpretation from your browser.
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 was wondering if there is an easy way to recreate the attached image using CSS3.
I've included this image as a page background but one of the senior devs told me there is an easy way to create this image background using CSS3.
I thought the background images can be done using CSS3 for repeatable patterns. But this image doesn't have any patterns that I could see.
Is that possible for this image?
I think this is interesting as experiment, but its not pragmatic.
You can convert an image to css here. PNGs work best.
Warning though, you will get tons of lines of HTML + CSS to create this image. It will come out pixel perfect though. I will also warn you that I tried uploading it to Jsfiddle, Jsbin and Codepen - all of them would just hang. Pen loaded and I couldn't save it since it's larger than 1MB.
This is what my text editor looks like with your image converted to CSS though.
This is just for reference. Yes, you can convert to CSS, but it doesn't mean that you should. I suppose it might be useful for things like email? But not for large images.
Cheers!
I want to be able to take my kingdom of loathing signature that has this code:
<img src="http://sigs.kingdomofloathing.com/player_2192849/mode_bigsig/l1_clan/l2_clantitle/s1_level/s2_class/playerfeed_2192849_bigsig.gif" border="0" />
I want to take the white background of the image and make it transparent. The reason why I can't do this in an image editor is because these signatures update every once in awhile according to what you have been doing in the game.
The simple answer is that you can't do this with CSS and HTML.
Adding transparency to the element with CSS like Frank Tudor stated (via opacity) will affect the entire image.
So really you have three options:
Edit the image using design software like Photoshop, removing the
white bg and saving it out as a trans gif or png.
Utilize CSS opacity, but this will make the entire object transparent. If you're okay with that then this is probably the easiest solution.
Use a scripting language. As others stated you can technically edit images using certain scripting languages like PHP. This will be the most time-consuming/technical way to perform this task (depending on your coding skills).
Hopefully this helps.
If the images are being updated, then it's up to whatever code you are using to dynamically create those images. You should certainly be able to use transparency when creating the images, regardless of how they are made.
I recommend PNG rather than GIF, but either would work.
Post the code of however you generate the signature images, and someone can help you update it to use a transparent background.
There are advanced manipulation functions javascript in one case I remember opacity being used for transparency and in most server-side programming languages you can find image functions.
The problem you face (without an image editor) is that transparency is parameter of the image as it is saved out (and some image types look better than others when it comes to transparency).
You could try this...
Try adding an ID or Class to your IMG tag and this bit of code.
#IDgifThing {
opacity: 0.5; /* 50% transparent */
}
I have not tested it, but I hope it helps you or at least puts your mind in the right direction.