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,202
questions
1274
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
910k
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
776
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.2k
609
votes
20
answers
362k
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
738k
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
504k
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
510
votes
8
answers
598k
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
500
votes
11
answers
715k
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,755
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
579k
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
398
votes
26
answers
399k
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,973
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
377
votes
23
answers
61k
views
Detect iPad Mini in HTML5
Apple's iPad Mini is a smaller clone of the iPad 2 in more ways than we'd want. In JavaScript, the window.navigator object exposes the same values for the Mini and iPad 2. My tests so far to detect ...
- 4,236
370
votes
12
answers
372k
views
How to place and center text in an SVG rectangle
I have the following rectangle:
<rect x="0px" y="0px" width="60px" height="20px"/>
I would like to center the word "Fiction" inside of it. For ...
- 3,855
368
votes
17
answers
501k
views
How do I center a SVG in a div?
I have a SVG that I am trying to center in a div. The div has a width of 900px. The SVG has a width of 400px. The SVG has its margin-left and margin-right set to auto. Doesn't work, it just acts as if ...
- 62.5k
359
votes
14
answers
64k
views
How to prevent an HTTP request just for a favicon? [duplicate]
Everybody knows how to set up a favicon.ico link in their HTML:
<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon">
But it's silly that ...
- 15.5k
330
votes
4
answers
95k
views
Are SVG parameters such as 'xmlns' and 'version' needed?
In about half of the svg examples I see on the internet, the code is wrapped in plain simple <svg></svg> tags.
In the other half, the svg tags have lots of complicated attributes like ...
- 8,268
330
votes
13
answers
645k
views
Can I change the fill color of an svg path with CSS?
I have the following code:
<span>
<svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; ...
- 32.2k
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
288
votes
14
answers
188k
views
Can you control how an SVG's stroke-width is drawn?
Currently building a browser-based SVG application. Within this app, various shapes can be styled and positioned by the user, including rectangles.
When I apply a stroke-width to an SVG rect element ...
- 3,613
266
votes
5
answers
308k
views
SVG Positioning
I'm having a play with SVG and am having a few problems with positioning. I have a series of shapes which are contained in the g group tag. I was hoping to use it like a container, so I could set its ...
- 8,695
266
votes
15
answers
581k
views
259
votes
16
answers
202k
views
How to calculate the SVG Path for an arc (of a circle)
Given a circle centered at (200,200), radius 25, how do I draw an arc from 270 degree to 135 degree and one that goes from 270 to 45 degree?
0 degree means it is right on the x-axis (the right side) (...
- 149k
259
votes
10
answers
267k
views
What is the easiest way to use SVG images in Android?
I have found a myriad of libraries in order to use SVG images in Android and avoid the frustrating creation of different resolutions and dropping files for each resolution. This becomes very annoying ...
- 24.8k
258
votes
10
answers
229k
views
Include an SVG (hosted on GitHub) in MarkDown
I know that an image can be placed in an MD with the MD syntax of either  or , but I am having difficulty placing ...
- 19.5k
256
votes
29
answers
109k
views
Removing transforms in SVG files
I have been struggling with this for a while, and can't seem to find an answer (that works) anywhere. I have an SVG file which looks like this:
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
...
- 8,892
255
votes
8
answers
523k
views
Resizing SVG in HTML?
I have an SVG file inside HTML, and one of the things I've heard about the format is that it doesn't get all pixelated when you zoom in on it.
I know with a JPEG or whatever I could have it stored as ...
- 5,969
255
votes
14
answers
107k
views
jQuery SVG vs. Raphael [closed]
I'm working on an interactive interface using SVG and JavaScript/jQuery, and I'm trying to decide between Raphael and jQuery SVG. I'd like to know
What the trade-offs are between the two
Where the ...
- 14.4k
251
votes
18
answers
347k
views
How to use z-index in svg elements?
I'm using the svg circles in my project like this,
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">
<g>
<g id="one">
<circle fill="green" cx=...
- 4,383
245
votes
1
answer
223k
views
Right mime type for SVG images with fonts embedded
This is the usual SVG mime type:
image/svg+xml
And it works great. However, when embedding an SVG font, chrome tells you the mime type is incorrect, obviously because you return a font instead of an ...
- 7,285
238
votes
5
answers
308k
views
SVG: text inside rect
I want to display some text inside SVG rect. Is it possible?
I tried
<svg xmlns="http://www.w3.org/2000/svg">
<g>
<rect x="0" y="0" width="100" height="100" fill="red">
...
- 33.5k
230
votes
8
answers
274k
views
How can I remove or replace SVG content?
I have a piece of JavaScript code which creates (using D3.js) an svg element which contains a chart. I want to update the chart based on new data coming from a web service using AJAX, the problem is ...
- 7,837
228
votes
11
answers
56k
views
How do I create a teardrop in HTML?
How do I create a shape like this to display on a webpage?
I don't want to use images since they would get blurry on scaling
I tried with CSS:
.tear {
display: inline-block;
transform:...
- 14.9k
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
217
votes
17
answers
486k
views
How to display svg icons(.svg files) in UI using React Component?
I have seen a lot of libraries for svg on react but none gave me how to import an svg file in the react component. I have seen code which talk about bring the svg code into react rather than using the ...
- 2,515
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
213
votes
27
answers
428k
views
How to show SVG file on React Native?
I want to show svg files (I have bunch of svg images) but the thing I couldn't find the way to show. I tried to use Image and Use components of react-native-svg but they don't work with that. And I ...
- 3,314
202
votes
3
answers
146k
views
Favicon Standard - 2024 - svg, ico, png and dimensions? [duplicate]
What favicon dimensions, file formats and meta/link tags should be used as of 2022? This includes apple icon, windows, android and other devices people use today.
I use Opera and I can see it supports ...
- 6,474
193
votes
7
answers
283k
views
Default background color of SVG root element
I'd like to set a default background color for the entire SVG document, to red for example.
<svg viewBox="0 0 500 600" style="background: red">/* content */</svg>
The solution above ...
- 9,977
190
votes
12
answers
193k
views
Circle drawing with SVG's arc path
Using SVG path, we can draw 99.99% of a circle and it shows up, but when it is 99.99999999% of a circle, then the circle won't show up. How can it be fixed?
The following SVG path can draw 99.99% of a ...
187
votes
9
answers
331k
views
Why don’t SVG images scale using the CSS “width” property?
HTML
<div id="hero">
<div id="social">
<img src="facebook.svg" alt="Facebook">
<img src="linkedin.svg" alt="...
- 2,687
185
votes
6
answers
147k
views
Does SVG support embedding of bitmap images?
Is an SVG image purely vectorial or can we combine bitmap images into an SVG image ?
How about transforms applied on the bitmap images (perspective, mappings, etc.) ?
Edit: Images may be included in ...
- 21.7k
180
votes
7
answers
181k
views
Capture Signature using HTML5 and iPad
Anyone know how this can be done? Would you use a canvas object, svg, jQuery, etc?
- 29.5k
179
votes
8
answers
348k
views
Drawing an SVG file on a HTML5 canvas
Is there a default way of drawing an SVG file onto a HTML5 canvas? Google Chrome supports loading the SVG as an image (and simply using drawImage), but the developer console does warn that resource ...
- 3,750
177
votes
17
answers
480k
views
How to extract svg as file from web page
I want to save SVG as file from this page https://www.lightningdesignsystem.com/icons/
Is there any Chrome extension or other way to do this?
- 2,458
174
votes
13
answers
160k
views
make an html svg object also a clickable link
I have an SVG object in my HTML page and am wrapping it in an anchor so when the svg image is clicked it takes the user to the anchor link.
<a href="http://www.google.com/">
<object data=...
- 2,776
170
votes
11
answers
203k
views
Auto line-wrapping in SVG text
I would like to display a <text> in SVG what would auto-line-wrap to the container <rect> the same way as HTML text fills <div> elements. Is there a way to do it? I don't want to ...
- 18.5k
