Questions tagged [svg]
Scalable Vector Graphics (SVG) is an XML-based two-dimensional vector graphics format that can also be used in HTML. Do not add this tag just because your project uses SVG. Instead, add the tag if your question is either about SVG or closely related, like how to achieve something with SVG.
4,887
questions
221
votes
17
answers
154k
views
jquery's append not working with svg element?
Assuming this:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("svg").append('...
1521237
470
votes
20
answers
776k
views
How to change color of SVG image using CSS (jQuery SVG image replacement)?
This is a self Q&A of a handy piece of code I came up with.
Currently, there isn't an easy way to embed an SVG image and then have access to the SVG elements via CSS. There are various methods of ...
- 14.3k
396
votes
14
answers
492k
views
Convert SVG to image (JPEG, PNG, etc.) in the browser
I want to convert SVG into bitmap images (like JPEG, PNG, etc.) through JavaScript.
- 5,501
777
votes
27
answers
1.3m
views
img src SVG changing the styles with CSS
html
<img src="logo.svg" alt="Logo" class="logo-img">
css
.logo-img path {
fill: #000;
}
The above svg loads and is natively fill: #fff but when I use the above css to try change it to ...
- 21.3k
1275
votes
47
answers
3.0m
views
How can I change the color of an 'svg' element?
I want to use this technique and change the SVG color, but so far I haven't been able to do so. I use this in the CSS, but my image is always black, no matter what.
My code:
.change-my-color {
...
- 14.3k
216
votes
1
answer
282k
views
Fill SVG path element with a background-image
Is it possible to set a background-image for an SVG <path> element?
For instance, if I set the element class="wall", the CSS style .wall {fill: red;} works, but .wall {background-image:...
- 29.3k
54
votes
4
answers
45k
views
Transparent arrow/triangle indented over an image
I would like to make a transparent arrow over an image. This triangle should be indented in a semi transparent block and show the background image.
Desired output:
.barShow {
background-color:...
- 579
115
votes
15
answers
117k
views
Transparent text cut out of background
Is there any way to make a transparent text cut out of a background effect like the one in the following image, with CSS?
It would be sad to lose all precious SEO because of images replacing text.
I ...
- 2,301
777
votes
20
answers
911k
views
Do I use <img>, <object>, or <embed> for SVG files?
Should I use <img>, <object>, or <embed> for loading SVG files into a page in a way similar to loading a jpg, gif or png?
What is the code for each to ensure it works as well as ...
- 33.8k
543
votes
26
answers
739k
views
How to modify the fill color of an SVG image when being served as background image?
Placing the SVG output directly inline with the page code I am able to simply modify fill colors with CSS like so:
polygon.mystar {
fill: blue;
}
circle.mycircle {
fill: green;
}
This ...
- 6,355
305
votes
15
answers
131k
views
jQuery SVG, why can't I addClass?
I am using jQuery SVG. I can't add or remove a class to an object. Anyone know my mistake?
The SVG:
<rect class="jimmy" id="p5" x="200" y="200" width="100" height="100" />
The jQuery that won'...
- 62.5k
78
votes
4
answers
30k
views
SVG data image not working as a background-image in a pseudo element
I'm setting a SVG as background-image for a pseudo element:
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 12px;
background-image: url('data:image/svg+xml;utf8,...
- 14.4k
6
votes
2
answers
15k
views
How to click on SVG elements using XPath and Selenium WebDriver through Java
I have an SVG object with a few rectangle elements. Using geckodriver, I am trying to click on one of the main SVG object. However with xpath-checker I am unable to detect the proper xpath for the ...
- 191k
96
votes
7
answers
76k
views
Transparent hollow or cut out circle
Is it possible to cut out a hollow circle using only CSS?
This we can all do:
But can we do this?
The circle must be hollow and transparent. Thus the problem is not solved by putting a solid color ...
- 2,622
103
votes
3
answers
234k
views
How to access SVG elements with JavaScript?
I'm messing around with SVG and I was hoping I could create SVG files in Illustrator and access elements with JavaScript.
Here's the SVG file Illustrator kicks out (it also seems to add a load of junk ...
- 8,898
