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,145
questions
0
votes
0
answers
21
views
How to apply clip-path to svg element not the child
Originally I have this SVG
<svg viewBox="0 0 288 288">
<circle style="fill: black;" cx="144" cy="144" r="144"></circle>
</svg>
I want to show a checkered alpha ...
0
votes
0
answers
50
views
How do I replicate the exact animation done on flecto.io hero section
I came across https://flecto.io(use a vpn if the site doesn't open) and the site caught my attention. I want to replicate the animation in the hero section. To be more precise, that is the part where ...
- 302
1
vote
0
answers
20
views
render SVG vector image files in DirectX 11
I need to render SVG vector image files (static images and animation) on DirectX 11. Is there a way to do this, or I have to convert SVG to a DirectX 11 compatible format file?
NOTE: I don't have a ...
- 71
0
votes
1
answer
46
views
Positioning an input button and overriding SVG
If you make the beginning coordinates and ending coordinates of the Bezier curve equidistant, then you can duplicate Bezier curves.
If you click the button, a second Bezier curve will appear under the ...
0
votes
2
answers
26
views
SVG Icons don't show after compiling / bundling with Webpack
This is my first time building a web-application, and I'm in my final steps. I'm trying to bundle the whole project with webpack, and everything seems to work, except for my SVG-Icons.
I think the ...
1
vote
1
answer
10
views
Issues with Event Handlers D3.js Update Function
I’m experiencing an issue where the mouseover event isn’t working after integrating the update function into my D3.js code. It seems the event listeners are not being recognized or triggered as ...
- 11
0
votes
1
answer
51
views
Using a CSV to set "fill" for SVG circles
I have SVG code that I would like to modify (with JavaScript?). I could use some help figuring out how to change the circles, as shown in the picture below, in accordance with values from a ...
- 39
0
votes
0
answers
9
views
Dicebear avatar converter in React Native isn't converting svg to png
I am using dicebear in my React Native project and have already generated an avatar that displays as an svg (using react-native-svg). However, I would like to generate that avatar as a png and for ...
- 11
0
votes
0
answers
13
views
How Can I Achieve SVG Design with Canvas Performance in a React Application?
I'm developing a React application that needs to render a large number of elements. I've implemented the rendering using both and .
Canvas: Provides excellent performance and smooth rendering.
SVG: ...
0
votes
2
answers
34
views
XSL File create SVG Chart with xml data
iam currently trying to convert an xml report to html via an xsl file (works good so far!) and afterwards convert the html to a pdf via xslt-fo.
I'd like to create an svg pie chart with some data from ...
- 1
-1
votes
0
answers
18
views
Export to SVG in Objective C? [closed]
I have an application where I can render certain shapes with overlays on a view and I can export those creations to PDF and EPS.
I've been requested to export to SVG.
Is there any library which can ...
-3
votes
0
answers
30
views
Create square SVG that fills out remaing vertical or horizontal space [closed]
I have a square SVG image. I would like to fit it into the page such that it fills out either remaining horizontal or vertical space (whichever is smaller). I can't seem to make it happen with flexbox ...
- 2,270
0
votes
2
answers
47
views
How to use calculated width for SVG rect?
I was trying to develop a svg skeleton image for showing it while data is loading, here is code which I was using for editing svg.
// converting svg tag to data url and setting it as background ...
- 326
0
votes
1
answer
50
views
HTML SVG Reduce Path Circle Size
I have a svg grey circle and a red path that follows the circle/overlays.
Does anyone know how to shrink the red circle so that it 100% covers the grey circle?
I cannot for the life of me work out how ...
- 1
0
votes
1
answer
69
views
SVG Component Rendering Inconsistently Across Browsers
I'm working on an SVG gauge component that works perfectly in Chrome but has rendering issues in Safari and Firefox. The gauge displays progress using a gradient fill and a rotating pointer. In Chrome,...
-2
votes
0
answers
54
views
JavaFX node to PDF using SVG? [closed]
Edited to hopefully now meet StackOverflow guidelines.
Possible duplicate of How can I export a JavaFX node to an SVG image?
I am trying to get a rather complicated tree chart JavaFX node onto a PDF ...
- 63
0
votes
1
answer
62
views
Transition on Fill property with linearGradient inside of SVG
I'm trying to achieve some kind of Stepper. It all works well except for the transition on the fill.
let step = 0;
document.querySelector("button").addEventListener('click', () => {
step++;
...
- 196
0
votes
0
answers
19
views
Problem adding SVG elements dynamically and rendering them using React Signals
I am trying to dynamically add SVG elements to my screen using React Signals. I now have a situation in which I do not get any errors anymore, but the dynamically added SVG elements do not render. I ...
- 5
4
votes
0
answers
43
views
SVG Mask Reveal Animation Not Working on iOS 16 and macOS Safari
I've created a reveal animation using an SVG mask to reveal the content of the page. The animation works perfectly on Chrome and other browsers. However, on iPhone iOS 16 and macOS Safari, the SVG is ...
- 41
0
votes
2
answers
48
views
Webpack 5 and SVG parameters
I updated to Webpack 5 and found out that url-loader is deprecated in favor of asset modules. I can load SVG's like so:
{
test: /\.svg(\?.*)?$/,
exclude: [path.resolve(...
- 81
1
vote
2
answers
58
views
How to remove space from svg file in PHP
How to remove the white space in svg file?
This is the my svg file.
<svg xmlns="http://www.w3.org/2000/svg" fill="none" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;display:...
- 13
-2
votes
0
answers
24
views
How to change the color of the svg icon using tailwindcss only while hovering through it? [duplicate]
I already read the questions about the SVG and this question my question is about how to do this with Tailwindcss only.
The project tools are React and Tailwindcss.
I want to change the color of the ...
- 131
0
votes
2
answers
39
views
How do I Create a Circular Progress bar in Expo React Native with a text in center?
I am new to React Native and trying to create the following screen:
I try to use two approaches:
import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Text } from 'react-...
- 5,684
0
votes
1
answer
37
views
Dynamically changing the attribute of an svg element in a highcharts chart
For a certain application, I have created draggable SVG rectangles in my highcharts chart. I wish to access them and modify their attributes dynamically from an external function where I have the '...
0
votes
2
answers
64
views
CSS local svg icon color [duplicate]
I am trying to setup some custom svg icons like this
<i class="my-svg-icon"></i>
I have the svg displayed but cannot adjust the color
.my-svg-icon {
height: 25px;
width: ...
- 807
0
votes
1
answer
39
views
Using setAttributeNS for changing SVG Path Arc element
I'm trying to store the coordinates of my SVG Path statement inside the eXist database. Here is my XHTML code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
&...
0
votes
2
answers
48
views
Fontawesome svg-icons in openlayers
I know similar questions have been asked before but their answers don't help me.
I'm trying to use Fontawesome-Icons as markers in an Openlayers map like this:
const svg = `
<svg ...
- 3
-1
votes
0
answers
67
views
Using setAttribute with SVG Path Arcs [closed]
I'm currently using XHTMl and SVG. After doing much research on the topic, I have come to the realization that the statement document.getElementById won't work with SVG elements. This is especially ...
-1
votes
1
answer
39
views
Image contained in parent element using tailwind flexbox layout
I have a template layout using flexbox and tailwindcss. I am trying to superimpose svg onto an an image and confine them to the max size of parent container. The image and SVG need to be responsive. ...
- 1
-3
votes
0
answers
42
views
How to make the parent element have the same width and height as the child svg element? [closed]
Hi so I am currently making a project with Vite.js with React + TSX, Tailwind and Daisy UI. I am currently trying to make a model button that overlaps a svg. The issue is that the button's width and ...
- 25
0
votes
2
answers
41
views
Load SVG code in HTML elements by class, can't select multiple elements with the same class
I'm trying to show SVG coded icons through JS in a number of HTML elements. I figured out how I can show it once, but I can't get GetElementByClassname to select multiple elements.
This is the code I ...
- 19
0
votes
1
answer
35
views
Links(Hyperlinks) inside an svg not working when the svg is placed in an img tag in a Bootstrap 5 Modal
In fact , the pointer doesn't even change its shape when it is hovered over the part containing the hyperlink. When I open the svg file separately in my browser , the links work alright . Below is ...
1
vote
1
answer
70
views
Why don't SVG filters take into account the position of the SVG's viewBox, since they do take into account its size?
<svg viewBox="60 0 200 40">
<filter id="blur" filterUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="1" />
</filter>
<path d="M 70 5 l 0 10" style="filter: ...
0
votes
0
answers
23
views
Build failed in Storybook webpack config caused by svg
this error occurs when launching storybook, all svg that i use in the application cause an error
in ./src/shared/assets/icons/about-20-20.svg ...etc
Module build failed (from ./node_modules/@svgr/...
- 1
-1
votes
0
answers
30
views
How to customize animation of svg in react? [closed]
I am pretty curious how brilliant creates a page like this:
The animation of svg is compeletely interactive to the programming block in the toolbox.
I want to make a page similar to this in react. Is ...
- 17
2
votes
1
answer
41
views
Is it possible to disable svg's animate element for prefers-reduced-motion media query?
I've got an svg with animation done using animateTransform element
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<...
- 24.3k
3
votes
1
answer
79
views
Fixing Transparent Line Between Div with Clip-Path and Parent Div
A thin, transparent line appears between the triangular div and its parent div when zoomed. I believe this is likely caused by anti-aliasing in the browser. If there is a way to fix this, I would ...
- 41
0
votes
0
answers
22
views
SVG embedded in external html page doesn't show in iframe
I want to embed an external webpage (https://flaci.com/regexp) into an html page of mine.
I did this with an iframe:
<!DOCTYPE html>
<html>
<body>
<p>
Here some text
...
- 101
-2
votes
0
answers
48
views
Extract CSS From SVG and move it to seperate file [closed]
mkdir your-project-directory
cd your-project-directory
mkdir svgs
npm init -y
npm install xmldom
touch script_name.js
const fs = require('fs');
const path = require('path');
const { DOMParser, ...
- 19
2
votes
1
answer
62
views
Is there a way to make the visual effect of linear gradient colors in SVG and CSS the same?
I found that the visual effect of the linear gradient color is different between SVG and CSS, especially in the adjacent part between two colors. I want to know if this is due to differences in linear ...
- 125
0
votes
1
answer
31
views
Can I have calculated coordinates in an svg without additional javascript?
Is is possible in svg to define coordinates relative to the boundary that dont get scaled? In this example, I have a square with an additional path inside. The coordinates of the point should be (w-1, ...
- 1,617
-1
votes
0
answers
10
views
how change attributes using svg-react library
convert svg to react component using svg-react library
in cli use command:
npx @svgr/cli --out-dir src/assets/icons/components --typescript --icon --memo --ref --jsx-runtime automatic --replace-attr-...
- 27
-1
votes
0
answers
15
views
Svg filters - Change color of image with feColorMatrix [duplicate]
I have created a t-shirt color editor/changer using SVG feColorMatrix & Javacript, the issue i am facing is when i set black color it becomes a flat image.
You can see the progress on CodePen:
...
- 23
-1
votes
1
answer
41
views
Converting SVG's to be rendered with ctx commands in JS
Lets say I have an svg,
<svg viewBox="188.1601 295.929 33.6399 36" width="33.6399" height="36" xmlns="http://www.w3.org/2000/svg">
<path fill="#...
- 1
0
votes
0
answers
16
views
I'm using the SvgUri package to render images. But not able to see while the app taken but connected via usb is working
This how I have imported
import Detail_R_Arrow from '../assets/images/detailRarrow.svg';
export {
Back_Arrow,}
This is my import statement
import SvgUri from 'react-native-svg-uri';
This how I ...
- 1
-1
votes
0
answers
53
views
How to change CSS color of data:image/svg+xml element?
I have the following CSS rule:
.btn-info, .btn-primary, .btn-success, .uk-button-primary {
background-color: transparent;
color: #fff;
border: 10px solid #f6a000;
border-image-...
- 21.1k
-1
votes
2
answers
82
views
how to modify the slope in svg shape
I have created one svg shape. I want the slope to start from middle. I tried,but I don't know how to make it. Can anyone please help me.
<svg xmlns="http://www.w3.org/2000/svg" fill="none">
...
- 67
0
votes
0
answers
37
views
When using stylus, pointermove event does not update target upon entering child [duplicate]
In the snippet below, the circle disappears if either (1) I click inside the circle and move the mouse or (2) I click outside the circle and move the cursor into the circle while holding down the ...
- 153
2
votes
2
answers
53
views
SVG animation in Blazor is inconsistent
I am trying to include some SVG animation in a Blazor page and it seems that it does different things each time I run it.
I would like to know if there is something I am missing to make this work ...
- 23
0
votes
1
answer
40
views
Batik creating blank svg on mac
I created a program to create a calendar as an svg image and it works just fine when I run it on windows, however when run on a mac it just creates an empty svg file. Can someone please help me figure ...
