Questions tagged [svg]

Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for two-dimensional vector graphics, both static and dynamic.

Filter by
Sorted by
Tagged with
97 votes
3 answers
6k views

Shielding your CodeReview on GitHub

In response to a feature-request on meta, I spent a few hours today creating the feature in php. This application adds a review shield to your GitHub repository (or wherever else you want it). It ...
Simon Forsberg's user avatar
12 votes
1 answer
27k views

Making lines with SVG and JavaScript

I just started trying out SVG the other day. Eventually I hope to be able to know how to do what SE does with their reputation graphs. For now, I've just been trying to set up an easier way to make ...
CRABOLO's user avatar
  • 908
11 votes
3 answers
2k views

Draw sine wave going around a circle

I have used d3 to draw a sine wave going around a circle. This is the very first time I've used d3 or drawn a SVG and I'm fairly new to JS as well, so I don't know if I've overcomplicated it/if there ...
bluprince13's user avatar
10 votes
1 answer
215 views

Visualization of the Pythagorean theorem

Background The Pythagorean theorem asserts that for a right triangle with hypotenuse \$c\$ and other sides \$a\$ and \$b\$, the area of the square placed upon \$c\$ is equal to the sum of the areas ...
mdfst13's user avatar
  • 21.6k
9 votes
2 answers
125 views

Git Insert Delete Graph

I attempted to recreate the GitHub code frequency graph (example) with a daily granularity using Perl and git log. How did I do, and what improvements can I make? I ...
HSchmale's user avatar
  • 895
8 votes
1 answer
25k views

HTML / JS Slot Machine Simulator

This code is a slot machine simulator that uses elements of both HTML and JavaScript. Please pardon the lack of comments. ...
DatLumberZach's user avatar
8 votes
1 answer
844 views

First attempt at a SVG parser

I figured it's about time to jump into some Haskell, so here's a first attempt at an oddly specific SVG parser: ...
Inaimathi's user avatar
  • 2,193
7 votes
1 answer
188 views

Random Dice Simulation

I extended the example in 04-random.elm to support N dice and to draw the results using SVG. ...
Dušan Rychnovský's user avatar
7 votes
1 answer
1k views

Python fractal tree using SVG

I made a simple program to generate fractal tree using PATH object of SVG. Any suggestions? ...
lukassz's user avatar
  • 273
7 votes
1 answer
2k views

2D colliding disks in JavaScript (ideal billiard balls)

I am implementing a simulation of colliding disks (ideal 2D billiard balls) in JavaScript. I follow an event-driven algorithm that avoids discretizing time; the algorithm goes as follows at each step:...
Maxim's user avatar
  • 173
7 votes
1 answer
261 views

Loading an SVG into the canvas

The code below is loading an svg into the canvas via RaphaelJS. There are mouseover/mouseout events, on click on an element of the svg, and drag/zoom. I would like to know, what are some good ...
Radu Dascălu's user avatar
6 votes
2 answers
6k views

SVG path parsing

I have a module in Python for dealing with SVG paths. One of the problems with this is that the SVG spec is obsessed with saving characters to a pointless extent. As such, this path is valid: ...
Lennart Regebro's user avatar
6 votes
2 answers
1k views

Parse floats from a string

While fixing some old code I came up with a class that parses floats from a string. This is used for parsing svg files in xml format. Floats can be separated by comma, space or anything at all in ...
キキジキ's user avatar
6 votes
2 answers
508 views

Soccer field map creator

I am fairly new to OOP and am working on a little website project to practice. I wanted to post after getting the initial setup done in case I am making any major errors or not following best ...
Lou Bagel's user avatar
  • 461
6 votes
1 answer
4k views

Simple grid using SVG

I developed this grid which displays number of records for X & Y, user can click each number to see a list. (I didn't add list markup to fiddle yet - so lets not worried about it for now.) What I ...
Mathematics's user avatar
6 votes
2 answers
866 views

Python Barcode Generator v2

This is a complete rewrite of the code posted for review in this question. The question is identical. ...
Carl Smith's user avatar
5 votes
2 answers
1k views

Optimizing mouse in/out

I have this code that places a marker and on mouse-over this marker is scaled out and then back to the 'original' scale: ...
khinester's user avatar
  • 277
5 votes
1 answer
7k views

Using d3.drag() to enable dragging on an SVG group

I'm using the following function to enable dragging on an SVG group. ...
SachiDangalla's user avatar
5 votes
1 answer
4k views

CSS mask clipping and overlay SVG to achieve a two effect

I am currently attempting to create a two SVG overlay / masking like the image below: I have created a SVG for the overlay. As it stands, I am trying to create two elements one for the green side and ...
NewKidOnTheBlock's user avatar
4 votes
1 answer
211 views

Cutting rectangle from circle

Can the following code snippet be optimized or am I doing it right? ...
Elmo's user avatar
  • 381
4 votes
1 answer
104 views

Shorten a SVG file created with Inkscape

I often use Inkscape for generating SVG images. However, these images contain data which doesn't seem to affect the visual output, so I want to remove it. To do that, I wrote the following code: ...
Dornteufel's user avatar
4 votes
1 answer
217 views

Shell function to convert .png to .svg file

I needed to convert some custom icons that were in .png format to .svg format and did not want to use an online converter for it. I could not find an out-of-the-box solution online so I created my ...
Montmons's user avatar
  • 193
4 votes
1 answer
497 views

Plotting discontinous function

I've made a simple web plot with D3 JS version 4. I've drawn a discontinuous function: $$f(x)=\frac{1}{x(x-2)}$$ which has 2 vertical asymptotes and 1 horizontal asymptote. I add a legend with LateX:...
Tobal's user avatar
  • 308
4 votes
1 answer
3k views

D3.js interpolating line on circumference of circle

For now, I've tried to make a line rotate on the path of a circle, but used setInterval multiple times and there might be other ways of achieving the same. I would ...
codex's user avatar
  • 143
4 votes
1 answer
2k views

SVG photo mosaic creator

I got this as part of some interview assignment. After some head scratching I think I have done quite well as the result can be seen here: After transformation(10x10 tile): More crisp picture with ...
CodeYogi's user avatar
  • 5,087
4 votes
1 answer
163 views

Render SVG background with Gradient

I'm new to and still fairly confounded by SVGs. I'm feeling pretty happy with the following hobbled together SCSS code demonstrated here: ...
MikeiLL's user avatar
  • 630
3 votes
1 answer
2k views

Compress svg files in PHP

I wrote something to "compress" svg files. The svg files I am using often have comments and empty <g> tags, and I want to remove them. My main goal is not the ...
twharmon's user avatar
  • 303
3 votes
1 answer
2k views

Best way to create SVG from database? (Using PHP)

I've got a SQL database that keeps track of which services a client has. I need to create an image using SVG that only displays the services that the client has. The database stores the services in ...
SomeKittens's user avatar
3 votes
1 answer
1k views

Generating SVG animation of falling leaves

This is a Python script I wrote to generate a SVG animation of falling leaves. How can I simplify my script and also make the animation look more realistic? ...
kyle k's user avatar
  • 1,517
3 votes
1 answer
124 views

Small Javascript Lib to draw SVG file

I'm new to JavaScript and I decided to make a script that allows other developers to show SVG elements in the web browser. (It is just for learning purposes), and it is still under development. I ...
Rami Belgacem's user avatar
3 votes
1 answer
2k views

Displaying overlapping blocks using d3.js

The code takes in nodes with different start time as input and assigns the position such that they will not overlap. As I have coded with too many loops and conditions. Can anyone review the code and ...
beeCoder's user avatar
  • 215
3 votes
0 answers
48 views

Browser-editable SVG diagrams using JS & SVG.js

[This is my first question to Code Review and it might be a bit too much.] I want to give users the means to draw a simple diagram in the browser, and because it is partly a self-education project ...
Atcrank's user avatar
  • 131
3 votes
0 answers
28 views

Compare timestamps of svgs versus exported pngs and export via Inkscape

This script goes through all svg files in an assets folder and compares them to the exported layers (one level above). If the svg timestamp is newer, it will automatically export the svg using ...
TheRed's user avatar
  • 131
3 votes
0 answers
723 views

JSON schema visualizer

I have the following backbone function to read a JSON schema and draw the tree structure (as in the screenshot below). I want to make sure if checking against the type as object/array is alright or if ...
SachiDangalla's user avatar
3 votes
0 answers
380 views

Hourglass path in SVG for Android

I've created my first Android drawable, a hourglass shaped image, and I'm curious what can be improved with it. It seems weird having to use 4 paths, but I couldn't get it to work any other way. ...
TMH's user avatar
  • 499
2 votes
1 answer
1k views

d3.js canvas performance

I've just rewritten this code (a simple gravitational restricted n-body simulation) to display using canvas, rather than SVG. The reason being that I'd like to be able to run it with many thousands of ...
zephyr's user avatar
  • 143
2 votes
1 answer
3k views

D3.js zoomable map

I have this code and would like to have it reviewed: ...
khinester's user avatar
  • 277
2 votes
1 answer
144 views

Simplify SVG creation and manipulation using Proxy

A need I have always found dynamically creating SVG content and filters a painful and messy process. The constant need for conversion from JavaScript values to SVG and back, Access to the SVG ...
Blindman67's user avatar
  • 21.7k
2 votes
1 answer
134 views

SVG drawing code

How could I optimize this code / make it look better? Any advice on things I'm doing wrong? ...
Stijn Bernards's user avatar
2 votes
2 answers
1k views

Optimize coloring book built with Raphaël and jQuery

I've been building a coloring book for kids: http://coloringbook.core.ba.lightburncloud.com/ It's got to work on an iPad, so I decided to try out Raphaël JS. I want to try and make this as efficient ...
MLatzke's user avatar
  • 21
2 votes
1 answer
34 views

SVG hue navigation bar

I've created a navigation spacer bar that has a hue background. To separate different aspects of content it was imported to Inkscape then exported as an SVG. It uses base64 image which I’m not sure is ...
Ryan Stone's user avatar
2 votes
1 answer
867 views

Google Map, SVG Graph and ruler

I would like to get feedback on the code. It is working and can be seen here. I welcome any kind of feedback, since I am just starting to use JavaScript. Epecially in the case of performance, there ...
gedysan's user avatar
  • 31
2 votes
0 answers
1k views

Grouped stacked bar chart in d3js

I've the following d3 chart which is both grouped and each grouped contains a stacked bar. But somehow, I feel this is not a proper way to implement and little complicated. If there was only stacked ...
Raviteja's user avatar
  • 121
2 votes
0 answers
496 views

SVG filtering an image to stepped alpha grayscale

I have a variety of images that will be used in a style intended to mimic a dot-matrix LCD. In a previous version, I rendered these images using a program and essentially ended up with a duplicate of ...
Niet the Dark Absol's user avatar
2 votes
0 answers
2k views

Optimizing snap SVG animation with collision detection

I have a snap SVG animation which animates a bunch of circles, and draws a line between them if they are within a certain proximity of each other. However, I realize that there is a lot of optimizing ...
mheavers's user avatar
  • 121
1 vote
1 answer
91 views

PacMan in JavaScript and SVG

So, I happen to know a bit about front-end development, and I'll make a seminar at the university about it where I share that knowledge with my fellow students. A few years ago, I've made a PacMan in ...
FlatAssembler's user avatar
1 vote
1 answer
2k views

"Spinning wheels" - Animated spinner with SVG and Sass-CSS

I've made this little animation using SVG, CSS-keyframes and a bit of Sass. ...
michael.zech's user avatar
  • 4,284
1 vote
1 answer
4k views

Converting an SVG polygon path from relative to absolute coordinates

This question was moved from StackOverflow as suggested by some users. I developed a function that aims to (should) provide a simple and effective method to transform a polygon ...
thednp's user avatar
  • 113
1 vote
1 answer
1k views

Is the Button, an <a> element with svg code and hidden link content inside, ARIA conform and well laid out?

I have an a element for a button. The SVG snippet inside links to the containing SVG file at the top of the body. ...
rkoller's user avatar
  • 153
0 votes
1 answer
203 views

Perl Hash mapping SVG elements to their attributes

Is there a more reliable way of building a hash of the attributes associated with each SVG element? ...
user avatar