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.
44,218
questions
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
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
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
609
votes
20
answers
363k
views
How to convert a SVG to a PNG with ImageMagick?
I have a SVG file that has a defined size of 16x16. When I use ImageMagick's convert program to convert it into a PNG, then I get a 16x16 pixel PNG which is way too small:
convert test.svg test.png
...
- 21.6k
604
votes
14
answers
337k
views
What are the different usecases of PNG vs. GIF vs. JPEG vs. SVG? [closed]
When should certain image file types be used when building websites or interfaces, etc?
What are their points of strength and weakness?
I know that PNG & GIF are lossless, while JPEG is lossy.
...
- 9,939
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
542
votes
10
answers
166k
views
HTML5 Canvas vs. SVG vs. div
What is the best approach for creating elements on the fly and being able to move them around? For example, let's say I want to create a rectangle, circle and polygon and then select those objects and ...
- 7,297
521
votes
7
answers
505k
views
SVG fill color transparency / alpha?
Is it possible to set a transparency or alpha level on SVG fill colours?
I've tried adding two values to the fill tag (changing it from fill="#044B94" to fill="#044B9466"), but this doesn't work.
- 19.9k
511
votes
8
answers
599k
views
SVG drop shadow using css3
Is it possible to set drop shadow for an svg element using css3, something like
box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
I saw some remarks on creating shadow using ...
- 58.3k
501
votes
11
answers
716k
views
Is there a way to use SVG as content in a pseudo element ::before or ::after
I would like to use ::before to place SVG images before some selected elements:
#mydiv::before {
content: '<svg ... code here</svg>';
display: block;
width: 22px;
height: 10px;
...
- 9,765
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
428
votes
11
answers
461k
views
Inline SVG in CSS
Is it possible to use an inline SVG definition in CSS?
I mean something like:
.my-class {
background-image: <svg>...</svg>;
}
- 7,528
410
votes
9
answers
580k
views
How can I make an SVG scale with its parent container?
I want to have an inline SVG element's contents scale when size is non-native. Of course I could have it as a separate file and scale it like that.
index.html:
<img src="foo.svg" style=&...
- 11.3k
399
votes
26
answers
400k
views
Unable to import svg files in typescript
In typescript(*.tsx) files I cannot import svg file with this statement:
import logo from './logo.svg';
Transpiler says:[ts] cannot find module './logo.svg'.
My svg file is just <svg>...</...
- 4,983
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
