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,118
questions
0
votes
0
answers
14
views
Showing a SVG contains links, created by GraphViz, on HTML
An SVG is create from the following test.dot file:
digraph {
google[label="google"
URL="https://google.com"
target="_blank" fontcolor=blue
]
}
...
- 471
0
votes
1
answer
21
views
I'm trying to style my icons that are dynamicaly imported from another file.js on my react app im using react-icons
my icons are imported and stored on a separate file.js i imported the file.js on my .jsx file & i can see the svgs being rendered on my website i also can change the size but the color remains ...
- 1
0
votes
0
answers
12
views
Multi line and axes chart using d3.js in powerbi
I'm trying to create a multi line chart with dual y axes , I've tried running the code in powerbi d3.js visual , but is not yielding any visual. I'm not understanding where I've made the mistake
I ...
- 15
0
votes
0
answers
28
views
How to make svg and its path the exact same dimensions? [duplicate]
I have an issue with lots of my svgs where the container is bigger than the actual content. See gif below where I flick between hovering over svg and path in the Chrome inspector.
As you can see the ...
- 7,405
0
votes
0
answers
53
views
How to set 'path' to use it with .getTotalLength() .getPointAtLength() methods?
I try to get 'path' to make use of it with .getTotalLength() .getPointAtLength() methods.
I try the following out of not knowing well enough SVG stuff:
// Declare the line generator.
const line = d3
...
- 1
0
votes
1
answer
26
views
SVG pixelized edges in Android Jetpack Compose
I converted the logo from SVG to XML in Android Studio. One change I had to make was replacing 'Fill' with '#pattern' with 'FillColor' because #pattern is not supported in Android. I don't think that ...
0
votes
0
answers
21
views
Tooltip is appearing on wrong element in Chome
I am facing an issue related to the tooltip on Chrome for this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=...
- 11
1
vote
3
answers
71
views
How to add closing tags for line breaks (can't save the changes because of html standards)
I need to save my DOM structure as SVG image. To do so I transform some elements according to SVG standards.
SVG demands that line break and img tag shall have closing tags.
When I try to replace them ...
- 187
0
votes
0
answers
23
views
Equation in svg does not look the same as in MathJax equation
I'm trying to write a program that produces an svg file displaying math equations. For example, I want this equation in an svg file . The font in this equation is the one used on EE.SE (MathJax). The ...
- 149
-1
votes
0
answers
29
views
SVG css animation on scrolling down [closed]
I got a task to implement svg animation on scroll down. The client want to look like on this website
https://priwatt.de/ .
How this type of svg animation are done?
I have searched for tools and ...
0
votes
0
answers
16
views
Svg fold in vs code [duplicate]
Classes can be fold as Flowed. Many classes can be accommodated in a small space. Is it possible to keep SVG like this? Or are there any extensions for vs code?
<svg xmlns="http://www.w3.org/...
0
votes
1
answer
74
views
SVG not taking full width of container div
Facing issue where SVG is not taking full width of parent div.
I've tried updating the viewBox and adding width and height attributes to the SVG, but neither approach has worked.
My requirement,
I ...
- 764
0
votes
1
answer
44
views
Formal limits or baseline of decimal precision in SVG implementations
I have tested some very basic SVG sample (stroked circle filling square viewport with dash-array producing quarter slices) in varying viewBox dimensions, and observed some spectacular rendering and ...
- 10.8k
0
votes
0
answers
16
views
Customize the dot marker with tooltip on line chart (ApexCharts)
I'm trying to create a custom library of chart component with Apexcharts and Vue3Apexcharts. I would like to be able to customize this little dot (marker)
Here is what I would like to customize
I ...
1
vote
0
answers
37
views
SVG circle stroke small radius
I create a svg library for my software using only svg outline and no fill. That way I can easily adjust appearance and color.
However, I am facing difficulties with small dots. I prefer using the <...
- 686
-1
votes
1
answer
44
views
How to convert .svg url into SVG tag
I am getting SVG icons from backend as below response:
{
"status": 200,
"amenities": [
{
"id": 4,
"amenities_name": "TV",
&...
0
votes
0
answers
24
views
Import image icons or using icon library for better perfomence [closed]
I'm learning react.js. I want to use icons to beautify the appearance of the UI,
for best practices on a large scale,
Is it better to use a png icon that you have made yourself previously (or ...
0
votes
1
answer
30
views
Next.js SVG Image Mask (Reusable component)
I've been trying all day to create a reusable Next.js SVG Image mask component, using only tailwind / inline styles for locally stored images. I want to be able to pass an svg into it and an image and ...
- 300
0
votes
0
answers
10
views
Matplotlib fig.savefig(): When using \textmu in labels, it is sized completely wrong after saving to vector graphic
when I use \textmu in labels, it is exported in a shrinked form in vector graphics such as svg and pdf (see 1st picture). If i save the file as a .jpeg for example it is displayed correctly (2nd ...
- 33
0
votes
0
answers
49
views
What is the explanation for nested svg behavior?
<svg width="100px" height="100px" viewBox="0 0 100 100" style="outline: 1px solid red">
<svg width="50px" height="80px"
style="outline: 1px solid green"
>
<circle cx="25" ...
- 6,829
0
votes
0
answers
32
views
import SVG with CDATA inside in React Application
I'm currently building a simple weather application using react-library.
The problem i'm facing is that the svgs that i'm using have <[!CDATA[]]> tag inside. So that when i do import svgExample ...
- 16
0
votes
0
answers
57
views
How to change image for this particle logo effect?
so I came across this code pen (https://codepen.io/srhcdesign/pen/gOJyqRQ) and thought it would be really cool to have on my website. I'm not sure how to change the image from the riot games logo to ...
- 31
0
votes
1
answer
59
views
Draw.io SVGs to Wikimedia, how to overcome XHTML issue?
I was hoping to make SVG diagram with Draw.io, and upload it to Wikimedia, so it could be used on Wikipedia.
However, Draw.io's svg uses XHTML and Wikimedia has banned XHTML for security concerns.
...
- 219
0
votes
0
answers
18
views
How to visualize GraphvizAlgorithm<Type, Edge<Type>> object to PNG or SVG in C#?
I'm working with the GraphvizAlgorithm<Type, Edge> class in my C# project and I need to visualize this object as a PNG or SVG image. I've created the graph and added the necessary nodes and ...
0
votes
2
answers
57
views
Masking a part of a border
Is it possible to make a div border masked in a specific place like in the picture above?
Some kind of div masks another div without setting a background-color (because the background of a whole site ...
- 11
0
votes
1
answer
35
views
use shadow light in circumreference of circular progress bar
I am running one circle progress bar where in bottom one i need to show little shadow. I am using SVG element where i tried to use linear gradient with light and dark color but it is not working as ...
- 356
0
votes
0
answers
24
views
Apache Batik Script Evaluation
I've created the following code as a test of Batik's Rhino integration:
public class BatikTest
{
public static void main(String...args) throws SAXException, IOException, ...
0
votes
0
answers
34
views
display SVG with gaussian blur in wxPython
I want to display in a wxPython frame an SVG image that uses a feGaussianBlur. The following example shows the image but the gaussian blur is not applied. I checked the SVG code, and it seeems fine.
...
- 45
0
votes
0
answers
31
views
Box not rotated at the right position
in shift + mouse rotation mode, when my mouse rotate to 0 degree, it automatically rotates back to the previously rotated angle.
This only happens when it is rotated to 0 degree while holding the ...
- 23
0
votes
0
answers
27
views
Markmap SVG as featured image in wordpress?
I'm trying to get a SVG file generated by the markmap library to work as a featured image on a post in wordpress.
(() => {
setTimeout(() => {
const {
markmap: O,
mm: h
}...
- 33
0
votes
1
answer
48
views
SVG Gradient with D3
I am trying to achieve the following svg gradient
The closest I can achieve is
I'd be very grateful if someone could help out
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.4/d3....
- 1,861
0
votes
0
answers
11
views
why the style error and chinese is not display when i use itext7 pdfhtml java lib translate svg to pdf
Initially, I utilized an SVG as a background image in the CSS of my HTML file and attempted to convert it to PDF using HtmlConvert.convertToPdf. However, my SVG images are experiencing styling issues ...
- 1
0
votes
0
answers
34
views
how to export same font for both base and ggplot2 plots, in R?
I am trying to understand how to make sure the font i am exporting from both base and ggplot2 plots is the same. The best would be to be able to have all plots from ggplot2 but for some reason, one ...
- 762
3
votes
1
answer
79
views
Plotly scatter map - How do I prevent marker text from overlapping?
I trying to plot a USA map using Scattergeo. I have a lot of markers that are close to each other, and their marker text are overlap each other and looks very messy. Are there workarounds for this? I'...
0
votes
1
answer
43
views
SVG Path with Rounded Ends
I'm trying to create a filled ellipse graph in React Native using react-native-svg that visually indicates a percentage. The filled part should have rounded ends, but I'm struggling to get the ...
0
votes
0
answers
11
views
SVG Icon Taking Long to Reflect on Google
I have a Vite React app, and I've recently updated my favicon to an SVG file. However, it seems to be taking a long time for this change to be reflected on Google. Here are the details of my setup, I ...
1
vote
0
answers
20
views
Error: peg$SyntaxError: Expected Character but "&" Found While Parsing SVG Path Data in JavaScript
I am working with an SVG file and converting it to JSON using svgson library. Additionally, I am using the svg-path-to-polygons library to decode the d attribute in the path element. However, I am ...
- 430
-1
votes
1
answer
52
views
how to import svg to Button in QML of QT5.12.12
I have imported this svg on button.
However, it doesn't display exactly.
Only background color is imported.
How to build same button including Gradient, radius, shadow, stroke and so on?
Button {
...
0
votes
0
answers
40
views
SVGs Display in Local Development (MAMP) but Not in Production (Nginx) on WordPress Site
I’m experiencing an issue with SVGs not displaying on my WordPress website when it is live (hosted via Nginx), although they work perfectly fine in my local development environment using MAMP.
Here ...
- 11
0
votes
0
answers
58
views
Polyline renders in different thickness in Firefox and Chrome despite having the same stroke-width
I have an SVG Polyline that renders in two difrerent thickness in different browsers - Thicker for Chrome and thinner for Firefox. Would anyone know why? And how would I fix it such that the two have ...
- 2,198
0
votes
0
answers
21
views
Trouble with laying two SVG Treemaps on one page. (with D3.js)
Trouble with laying two D3 treemaps on one page.
Hello,
I am new to D3.js and SVG and I had trouble laying two SVG Treemaps on one page.
I got a hint from this.
text
What I want to do is lay two ...
- 1
1
vote
0
answers
57
views
Three.js SVG Loader - can I simplify or fix geometry?
I have imported an SVG shape of the letter 'M' into Three.js using SVG Loader. The geometry that is being created seems unecessarily complex and is causing issues.
Is there a way to achieve cleaner, ...
0
votes
0
answers
37
views
paste pdf image with correct width and height and position to svg file in python using fitz
`i am trying to convert pdf file to svg with correct formating
i am using the fitz pymupdf library
the text is formatted correctly but i cant adjust the image
"this is my first time working with ...
0
votes
1
answer
62
views
Issues with Using v-slot to Insert HTML Code into SVG Elements in Vue
Issues with Using v-slot to Insert HTML Code into SVG Elements in Vue
Description:
I'm using v-slot to insert HTML code (from the parent) into an SVG element of a child component via JavaScript.
I ...
- 62
0
votes
1
answer
33
views
D3 Chart Doesn't work when using viewbox in Angular Project
My SVG just will not show up in my dom when I change it to try and use a viewbox.
I am just realistically just changing this:
.attr("width", this.width + this.margin.left + this....
- 343
0
votes
1
answer
25
views
Adjust the SVG Path to achieve required design in my react app using tailwind CSS
Here is my running code so far:
// DiscoveryResponse.jsx
import { useState } from 'react';
import Heading from '../Heading/Heading';
import DiscoveryButton from '../DiscoveryButton/DiscoveryButton';
...
-1
votes
1
answer
44
views
JS: Accessing paths on loaded SVG image, to change colours, before drawing to document
I have an svg that has multiple paths inside that I want to manipulate the colours before drawing into the document:
In the SVG I have
<path id="pathHair01" ....
<path id="...
- 1
1
vote
1
answer
59
views
How to play svg animation on a website? TypeError: svgObject.beginElement is not a function
I'm beginner in the programming!Please help me!!!I have the svg animation file and i want when i click the button on my website the svg will play.
But it give me the issue:TypeError: svgObject....
0
votes
0
answers
20
views
My svg animation isn't responding properly to js transformations (translation)
I coded this animation with an svg text that's supposed to move like this: first the text "Times New Roman" enters from the right side of the screen, right after that "ce" reaches ...
- 1
-1
votes
0
answers
19
views
React Icons Gi (game-icons) importing all library when importing any of them
Like a title says, if I import any icon from their library my component have additional ~5MB https://game-icons.net https://react-icons.github.io/react-icons/icons/gi/
Code here! | I can paste svg ...
