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.

Filter by
Sorted by
Tagged with
0 votes
0 answers
14 views

How to embed svg in a node with ''meimaid .js" with no space between the arrow and the image?

enter image description here var mermaidAPI = mermaid.mermaidAPI; mermaidAPI.initialize({ startOnLoad:false }); var element = document.getElementById("app"); var insertSvg = function(...
fishman's user avatar
0 votes
0 answers
19 views

How to wrap a SVG's text to multiple lines using D3.js?

I am building a demonstration system to showcase some results of some different graph algorithms. These graphs have nodes and edges, with labels for both. Currently, my edge's labels are overlapping ...
C Study's user avatar
0 votes
1 answer
34 views

can't display two d3 charts at the same time in my angular app

I just added a second d3 chart as own component (like my first one) into my angular project. When I tried to display both on one of my pages, just the second one will (which needs some time to render) ...
patrick's user avatar
0 votes
2 answers
44 views

Placing colored arrows alongside an edge

I am looking for a way to draw colored arrows alongside edges in Graphviz. It must be possible to choose which side of the edge they are on, and it must be possible to draw multiple arrows of ...
Zaz's user avatar
  • 46.6k
0 votes
0 answers
11 views

How to Correctly Render SVGs Exported from Figma?

Background: I am a designer venturing into the world of React, trying to integrate components designed in Figma into a React application. My strength lies in design, and I am relatively new to coding ...
Nomi's user avatar
  • 1
0 votes
0 answers
24 views

Inkscape measure tool gives unexpected results

I'm working with Inkscape 1.1 on an iMac running 10.14.6. I'm working on making a grid that has 4 rows and 7 columns. Each cell is 39mm X 39mm with a 5.3 mm line between the rows. I've gotten the ...
Greg W's user avatar
  • 31
-2 votes
1 answer
32 views

How to put svg in one line with text file

The svg file is on another line, i need it to be right next to the word <h1 className="text-8xl text-center text-white font-extrabold mb-10"> Take Your Ne <span style={{ display: &...
Artem Zakunts's user avatar
0 votes
0 answers
19 views

QT, Change the color of the SVG dynamically

I have an SVG icon that I draw using QSvgRenderer, I need to change the color of the icon, I have seen uninspiring solutions online, i.e. opening the SVG file and modifying the style parameters and ...
John Travolt's user avatar
0 votes
1 answer
40 views

SVG <animation> tag loop

<svg width="1440px" height="701px" viewBox="0 0 1440 701" fill="none" xmlns="http://www.w3.org/2000/svg" id="svg1125" preserveAspectRatio="xMidYMid" xmlns:svg="http://www.w3.org/2000/svg" xmlns:...
TRust's user avatar
  • 5
0 votes
0 answers
20 views

Generate annotated network diagrams [closed]

I am looking for a way to draw annotated network diagrams programmatically. It must be possible to choose the position of each node and to draw colored arrows on either side of each edge. The goal is ...
Zaz's user avatar
  • 46.6k
0 votes
0 answers
13 views

Rideogram not exporting svg to pdf or png (RStudio)

I've bee trying to make a synteny plot with RIdeogram and it worked with same code and files in another computer but in my computer (windows 10) when I try to export it reports "Warning message: ...
Paula Sianes Castillo's user avatar
1 vote
0 answers
19 views

How to undo/ignore referecing element transform for SVG <mask>

svg { width: 600px; height: 600px; } image { transform-box: fill-box; } <svg> <defs> <mask id="myMask"> <rect x="0" y="0" width="100" height="100" fill="white"...
Malo Guertin's user avatar
0 votes
0 answers
7 views

Problem with dynamically loading SVG in Nuxt3

Building Nuxt3 project currently, I have added 'vite-svg-loader' plugin to dynamically load SVG's.The following code works fine: ... <Logo/> ... import Logo from `~/assets/logo.svg` Now, I am ...
irwin's user avatar
  • 115
0 votes
0 answers
82 views

I need to join html elements with js

I am working with ruby on rails code, I have a .erc file where it returns a fragment of html code, it performs a foreach to an array, this fragment of code is executed 12 times since there are three ...
Jose Manuel Mendez benitez's user avatar
0 votes
1 answer
35 views

How to use one of the icons from a svg file in the HTML? [duplicate]

I have an svg file containing two icons. Here is the code of svg: <svg width="108" height="64" viewBox="0 0 108 64" fill="none" xmlns="http://www.w3.org/...
Zhe Lin's user avatar
  • 11
0 votes
0 answers
12 views

how to change the SVG color on hover in react js [duplicate]

I try to change the svg color when i hover the icon ,,, first i just try to change the collor but it not work import img1 from "../../../assets/specialities/specialities-01.svg"; < div ...
Rubayet Hasan Yasin's user avatar
0 votes
0 answers
18 views

Local file displays correctly with .html extension, but not with .svg extension [duplicate]

I have a local file with the below content that displays correctly in Firefox and Edge when it has the .html extension, but not when it has the .svg extension. It also does not display correctly in ...
Jann Poppinga's user avatar
0 votes
1 answer
34 views

Tinting the color of a svg image in .NET Maui

I am trying to dynamically tint the color of a svg image in .NET Maui as I am transitioning from Xamarin.Forms. I have the following code set up to use a binding to a color in string format, but I am ...
minimite's user avatar
0 votes
0 answers
9 views

React - How do I zoom-in to a particular coordinates in world-map svg?

I have implemented world map SVG with 'react-svg-worldmap' library. To add, I have used 'react-zoom-pan-pitch' library to zoom-in, zoom-out and reset features in my world-map. In the map, I have added ...
jsonahn's user avatar
1 vote
1 answer
31 views

MathJax not rendering column lines in an array

I'm running MathJax on the server side with Node, because I need to render math expressions into SVGs. However, a feature I really need, column lines in arrays - useful for augmented matrices - don't ...
naiveai's user avatar
  • 622
0 votes
0 answers
27 views

Rescale SVG inside an object [duplicate]

I try to resize my SVG inside an object in HTML, I tried to put 'reserveAspectRatio="xMinYMin slice"' inside the svg file and I also tried to put object-fit:contain inside the #svg or the #...
Alpe Popas's user avatar
0 votes
0 answers
18 views

Automate a task of editing cdr files in c# using corel draw type library

Update : I am able to get the shapes now, only insertion of texts is remaining, and I am not able to figure out the way to insert text. Now I am getting an exception while creating the instance of the ...
Linesh Lanjewar's user avatar
1 vote
1 answer
55 views

Issue with getting "gooey" CSS SVG filter for rounded text background to work in Firefox

I was attempting to recreate the following rounded background effect found in this Dribble design: Through some research, I found out that it was called the gooey effect. I tried to implement these [...
Candide x Media's user avatar
0 votes
2 answers
22 views

Is there a way to save a plot generated with pROC as .svg or .ai?

I have to submit figures generated with pROC package to a journal that requires editable figures (in .svg or .ai formatting specifically). Until now, I have just been right clicking on the figure as ...
llarsson3's user avatar
0 votes
0 answers
22 views

How to merge contours in OpenCV or adjust?

I'm using OpenCV in Kotlin to detect black lines, but it always gives me the cotours of the black lines and because this they are not connecting at all, it would be necessary, bc i will have to ...
Milán Buha's user avatar
0 votes
0 answers
45 views

Efficiently render checkerboard in HTML

I'm working on a project where I'd like to be able to render a giant checkerboard pattern on a component in a webpage. It'll have variable size, but probably no more than 100x100 cells, and each cell ...
non's user avatar
  • 29
0 votes
2 answers
57 views

SVG arg fadeout/gradient effect

I'm trying to create doughnut visualization using d3 with fadeout/gradient effect for each arc like this: I've tried to add 'filter: drop-shadow(0 0 10px color)' but it doesn't give me this effect, ...
Gal Ziv's user avatar
  • 6,942
0 votes
0 answers
14 views

How to alter SVG elements in React js and use Recharts at the same time?

I'm using recharts line chart along with a brush element. I've managed to set a fixed width (length) to the brush traveller by accessing it's SVG element and removing the edges which users use to ...
PRATYUSH MANNA's user avatar
0 votes
1 answer
65 views

Having multiple issues getting images to appear in a MAUI library

Currently I'm trying to add a Dropbox icon to a MAUI library - not the app, a library which the app calls - and I'm following the example of the dotnet_bot svg which is included in the default MAUI ...
donaldp's user avatar
  • 252
0 votes
0 answers
19 views

I cannot produce svg images with asymptote

I cannot compile asymptote code to output to svg. I have a minimal file settings.outformat="svg"; size(10cm); draw(unitsquare); in my test.asy file and when I compile it using asy test....
jfab's user avatar
  • 1
0 votes
0 answers
27 views

Create svg on the fly and reference in css [duplicate]

I am trying to create an svg element on the fly, adding it to the body and change the css stylesheet to reference a specific class property to the svg id. The svg looks like this: <svg id="svg&...
gleeuwdrent's user avatar
1 vote
0 answers
23 views

Icon cache in Shopware 6 let's icons disappear after all.js is loaded

When Settings-> System->Storefront->Activate icon cache is activated, the download center plugin does not show icons after the page is loaded (before all.js is parsed, the icons are briefly ...
Alex's user avatar
  • 32.8k
-3 votes
0 answers
43 views

Crop PDF in Python Without crop lines

I'm trying to cut a pdf to remove the cut lines generated by Adobe Illustrator with a python script. The problem I have is when I try to convert this new pdf to svg, the cut lines appear and I don't ...
Xora-dev's user avatar
0 votes
1 answer
27 views

Colourise unfilled svgs with Sharp

I want to use Sharp to colorise SVG files without a fill attribute (these look black in my browser) and export the result as a png. Currently I'm using the following process: sharp().modulate({ ...
Matt Saunders's user avatar
0 votes
0 answers
22 views

How to use svg clipping mask to animate circles?

I want to create circles inside lenses that move inside lenses when slick slider transform. What's the correct way to do it? enter image description here I used svg and clip-path with mask but the ...
nada hanash's user avatar
0 votes
0 answers
16 views

Linear Gradient not working on react pdf applied to stroke attribute

I have getting issue when using LinearGradinat on react-pdf with stroke attribute Here is a sample piece of react-pdf to demonstrate the problem <Svg width="100%" height="100%" ...
Naresh Sagathiya's user avatar
0 votes
0 answers
24 views

How can I get the offset of an element within an SVG document? [duplicate]

How can I get the display offset of an SVG element within the SVG document? In particular, I'm trying to load an SVG image into memory as a separate document and get the offset of an element within ...
Tom's user avatar
  • 7,279
0 votes
1 answer
37 views

How to reuse nested elements with href in an SVG background-image?

I am creating an SVG background and I want to make the file size smaller by reusing paths. Because the SVG is applied to an HTML element, called using CSS, like so background-image: url("filename....
Mentalist's user avatar
  • 1,530
0 votes
0 answers
14 views

Filling a circle with patterns in R using MikeFC's svgparser and minisvg

I can't replicate the result of filling the circle with the pattern object. It will only draw a circle with no pattern inside it. I am following MikeFC's instructions found here: text The entirety of ...
Jyn Taru's user avatar
0 votes
0 answers
11 views

How to use svg-chunk-webpack-plugin along with prefixing the svg IDs using webpack 5?

Hi I have got lot of individual svg files which I want to chunk in a single file using svg-chunk-webpack-plugin. I followed the example here and was able to do it. It is internally taking care of ...
Mitesh Agrawal's user avatar
0 votes
0 answers
6 views

Weird flicker with animated SVG using AnimeJS

I have an SVG (created in inkscape) that I'm trying to animate with AnimeJS. I'm encountering an issue where there's a weird flicker at the beginning/end and I can't seem to understand what's going on....
wtfacoconut's user avatar
0 votes
0 answers
34 views

svg rect pattern overlapping issue

Let's say 2 svg rect with pattern stripes are overlapping each other. Is there anyway, svg with darker pattern fill should be visible in overlapping area. svg { width: 500px; height: 500px; } ...
Coder Sam's user avatar
0 votes
3 answers
68 views

How do I use the icon from the .svg sprite directly in the CSS/SCSS?

a customer is swearing and demanding that by 2023 standards I use all icons inside the svg file. And icons both for background images and for normal icons that can be changed. I am using an svg sprite ...
Mark's user avatar
  • 3
0 votes
0 answers
13 views

PDF.svg method from svg2pdf.js library using jspdf does not render the expected output while running in loops

I have an array of elements and for each element am trying to add the data of each element to the same PDF document so that it comes in different pages in the same document. If I am calling the PDF....
gandhi's user avatar
  • 1
0 votes
1 answer
35 views

Is there any solution for filling the dashedline's gap color?

I need to fill the color of the dashed line's gap. I achieved this need by using a solid line and a dashed line. The solid line works as the background. I don't know if there exists better solution. ...
personax's user avatar
0 votes
0 answers
11 views

Embedding SVGs in inside of embedded SVG [duplicate]

I'm fairly new to SVG and wanted to know if it's possible to have nested embeddings of SVGs. For example, I'm embedding SVG 1 into SVG 2 as follows: <image href="SVG-Files/SVG1.svg">&...
Lance's user avatar
  • 4,746
1 vote
0 answers
41 views

svg animation works only once

I am trying to animate an svg-circle. It works fine the first time a press the button, but not the next time. Any ide of what could be the problem? $(function() { $("button").click(function() { ...
Arne Laugstøl's user avatar
0 votes
1 answer
60 views

Why can't I import from js file?

Im using svg.js(v3.0.10, which is just "svg.draggable.js" needs) and svg.draggable.js, but I got an error: Uncaught SyntaxError: The requested module './svg.js' does not provide an export ...
Tian_Godgiven's user avatar
0 votes
0 answers
37 views

Can svg blobs contain hrefs?

I am building a website that displays content from a server (text, images, html, pdf, etc..). As the client does not know ahead of time what the content type is, it downloads the content, checks the ...
mil2d2's user avatar
  • 1
0 votes
1 answer
36 views

How can I get IntelliSense for SVG in HTML, CSS, and JS in VS Code?

How can I get in VS Code autocomplete / suggestions for words like svg, circle etc. . ? I have few extension like Auto Close Tag but that doesn't work. In JavaScript, it doesn't autocomplete .style....
b1ckr0se's user avatar

1
2 3 4 5
871