Most voted "svg" questions
SVG (Scalable Vector Graphics) is a two-dimensional vector graphics format based on XML.
Learn more…168 questions
Sort by count of
-
31
votes3
answers1005
viewsHow to convert animation in Canvas/JS to SVG?
I’ve been using a javascript library to make icones/symbols of a weather app. I now wanted to do in SVG the symbol of the cloud (cloudy sky), and wonder what the best approach. I made a svg with the…
-
23
votes1
answer975
viewsWhat is an SVG?
Nowadays, we talk about image quality and always linked to this type of statement every now and again, this mysterious acronym appears. It seems to be SVG something really amazing, they say that…
-
20
votes2
answers710
viewsHow could you make a Pacman by moving your mouth with pure CSS?
In order to go deeper into the CSS, I would like to know different ways of making animations. My goal is to know some new properties and features that CSS has been implementing. In the specific…
-
13
votes1
answer233
viewsHow to calculate the dimensions of an SVG element
How to calculate the dimensions of an element svg consistently across browsers? In fact the only one not to respond consistently is Firefox. It would be interesting to understand the reason for the…
-
11
votes2
answers458
viewsCircle with curved edge
I’ve been tasked to make a website, and I’m having trouble making a detail in CSS I need to make a round edge that has a curved ending, so you understand better, I’ll show you photo and post my code…
-
11
votes2
answers295
viewsDoes Google index images in SVG (inline) or Base64?
I was thinking of turning the logo of a site to SVG, but I was thinking of using it in a way inline as code within tags <svg>. To be inline, I can interact as the SVG directly through the CSS,…
-
9
votes1
answer236
viewsDivide circle SVG into 12 parts
I’m using an SVG circle and I want to share it with a line dynamically created into 12 parts. I can only divide into 4 parts, through its radius. I know it is possible through the sin and cos.…
-
8
votes1
answer197
viewsText snake animation with SVG
I’m trying to reproduce the same effect that someone did here -> http://bit.ly/1FCtQSQ , this frame is animated by scroll, therefore it is necessary to descend a little until a text with an…
-
7
votes1
answer792
viewsHow to export an HTML/C#(Razor) page that contains SVG elements to PDF?
I am currently working with Highcharts, a javascript library that generates graphics. It has an export component, but only exports the chart itself, still need to assemble the PDF layout. For the…
-
7
votes3
answers3604
viewsHow to make a background of an element in SVG in a decent way?
I develop websites that have the company logo on SVG, but wanted to know how to test easily or force to replace the SVG when the browser does not support. So I could have done the logo on PNG to…
-
7
votes1
answer982
viewsSave space, SVG, Base64 or regular images?
I created this question to clarify doubts that I ended up developing over the months in relation to images and space. While accessing websites, either on my mobile phone or my normal computer, I…
-
7
votes2
answers1906
viewsHow to leave a responsive . svg image inserted directly into html
I have an image of the map of Brazil in svg all mapped and when resizing my page the same does not follow this resizing, I have read some articles and tried some solutions and in none of them I was…
-
6
votes1
answer133
viewsDropdown with SVG
I have an art and now it’s in an SVG file. The problem is that the client wants that when passing the mouse (or if clicking) on a block, he should open a menu. I don’t know if you have the ability…
-
6
votes1
answer183
viewsHow to make animation with SVG or CSS of a Text walking the way?
I have an SVG that is a Text aligned on a Path. But my intention is to do the text "running" by Path, as a Marqueer. The idea would be something like this image. But what I got was to animate the…
-
6
votes1
answer69
viewsWhat is the impact on the browser when there is infinite and direct interaction in HTML?
I have several polygons that change their points infinitely (while on the page), this interaction is done by a js plugin and in my code I have these calls: var config = { targets: '', points: [],…
-
5
votes1
answer1706
viewsWorking with SVG files dynamically
I am developing a web page where I use numerous effects in CSS. among one of them I realized that I can not ultilizar the filters in Firefox. Searching the internet I found some solutions that tell…
-
5
votes1
answer309
viewsHow to get the position of an <Circle> element that is inside an SVG via Javascript?
I have an SVG that contains, among other items, an element <circle>. I can manipulate it via Javascript by changing CSS properties such as visibility, but I can’t get his position on the…
-
5
votes2
answers18380
viewsChange svg color in :Hover
I have a SVG inserted with the tag img on my website. I would like to know if there is a way when I do the Hover in this image it changes color but only with CSS? This is the contents of my SVG…
-
5
votes1
answer184
viewsColoring part of an SVG circle
I’m creating a circle in SVG. With a cycle for, I want to create several lines to color a certain part of the circle, without exceeding the same (for example half of the circle.) The point x1 and y1…
-
5
votes1
answer399
viewsIs it a good idea to insert SVG inline files?
I’ve been going through some websites and the ones that use SVG logos usually put them in a file separately. This brings the practicality of when you change the file, on all pages it changes, but…
-
5
votes1
answer502
viewsConvert svg to png java
I am trying to perform an SGV image conversion to PNG, but am having some problems. My code: String svg_URI_input = Paths.get("/home/ivan/Documentos/imagem/Svg2.svg").toUri().toURL().toString();…
-
5
votes1
answer127
viewsSVG mosaic comic style
I’m developing a comic style layout and wanted help to create a svg. in the case the last comic is similar to the photo placed from the DC commics (from Batman). Somebody help me create this last…
-
5
votes1
answer853
viewsHow to add an external source in an SVG?
I have a logo that I made in SVG, on file .svgexternal, which uses has a text with the name of the company, whose source is Open Sans Light. On my machine works normally due to the fact that I have…
-
4
votes1
answer409
viewsCopy (clone) an SVG element
I want to "clone" an SVG rect in Javascript when I click a button. I tried this code, but it didn’t work. <svg id="svg"> <rect id="rect" x="5" y="25" width="50" height="50" stroke="#0E0E0E"…
-
4
votes2
answers2204
viewsHow to make SVG image fit the size of a DIV?
I have an image SVG of more or less 100 lines and 60 paths and need it to fit to any block node, such as a div for example. I tried to put a class css in the tag svg and adjust the width for 100%…
-
4
votes1
answer135
viewsKeep SVG line by always connecting two objects
I have two objects circle, that I can move with the mouse. I wanted a line between the two circles, that whenever one moves, the line is always glued. The code I have for moving objects: var dragged…
-
4
votes1
answer78
viewsMove Image Browser
I’m moving an image with mouse(mouse). When I use Chrome it works perfectly. But when I use the Firefox browser, moving the image shows the ban icon on the mouse, and moving it is different. How can…
-
4
votes1
answer1776
viewsVector images, Font Awesome, Bootstrap Glyphicons. How do they work, what are the advantages and disadvantages?
I was just taking a peek at Font Awesome and in the Bootstrap. They use a font scheme for icons: On Font Awesome I saw the following files: Fontawesome.otf fontawesome-Webfont.eot…
-
4
votes2
answers190
viewsCSS SVG file does not perform Javascript function
I’m using an SVG as background-image, via css: #element { background-image: url('triangle.svg'); } Then inside the SVG arch I call a function in the onload because I need to pass RGB color…
-
4
votes1
answer111
viewsHow to put a border / Stroke in an <image> in an SVG?
I need to add one stroke around a <image> within a <svg>. But nothing happens when you add the value to that tag. See below what happens: when I use on <image> does not work, but…
-
3
votes1
answer88
viewsMouse position when moving an SVG object
In my Javascript code, using the mouse I move a SVG rectangle from side to side. My problem is that when I click on the object, the mouse position is not fixed in the middle object but in the upper…
-
3
votes2
answers76
viewsGet width in pixels
I want to get the pixel value of a svg element that is set in %. I have the following example, but return 0. http://jsfiddle.net/n6vo8ksr/…
-
3
votes2
answers101
viewsSVG kartograph file
Using kartograph, I want to load the SVG from this link: SVG. The first thing I noticed was the missing tag Metadata. So I copied this tag from another SVG file, but the image still doesn’t appear.…
-
3
votes2
answers485
viewsCompare id attribute with class and give . show in another div
I’m making a map of brazil as svg, need that when I click on a certain state it gives a show in a different div that will have the information about that state. I need to compare path id with div…
-
3
votes1
answer360
viewsClick event on an SVG
I have a map of Brazil, in an SVG, where I would like to present a div next to each state when clicking on it. I managed to work the color change with hover using the ID of each state of Brazil:…
-
3
votes1
answer183
viewsHow to bring the content of a postgis query to a JSP page?
I have postgis with a database that I downloaded from ibge and I need to make a javaweb application that reads the name of a municipality and brings back the data in svg format and displays the…
-
3
votes2
answers360
viewsWhy doesn’t my . svg work in Firefox?
My . svg is not loaded in Firefox, in Chrome it works normal. I am using css to do this, with the property background: url('data:image/svg+xml...). I made a Jsfiddle for example, containing all the…
-
3
votes0
answers219
viewsCreate a drag for multiple SVG objects
I’m using Vue.js to create a jflap clone. But I’m having trouble creating the drag for each object. In this case, the circle when clicking and dragging this, must follow the route of the mouse until…
-
3
votes1
answer294
viewsMake SVG responsive
I cannot manipulate the size of this Hexagon, I wish it initially had the size of 165x165px, and respectively make it responsive. I don’t have much experience with SVG. <svg width="165"…
-
3
votes1
answer5543
viewsSVG does not adjust size
I don’t have much experience with SVG, and I find very confusing the way to work with these images, I need to leave this image with the size of 35x35 px. I exported the code in the Illustrator of a…
-
3
votes2
answers85
viewsHow do I use the Symbol tag instead of the g tag in Iron-iconset-svg?
I am trying to define an Iron-iconset-svg using the icons with the Symbol tag instead of using the g tag and the icon is not rendered. In all documentation and references on the internet the SVG is…
-
3
votes2
answers6305
viewsHow to insert an image using Laravel Blade 5.1
If I need to insert a css file or a script, I should do it respectively: <link href="{!! asset('css/style.css') !!}" type="text/css" /> <script type="text/javascript" src="{!!…
-
3
votes1
answer495
viewsAttack svg image with css and include php
I cannot attack the properties of the SVG image with include php. Is there another method? Therefore, I need to call the bank images dynamically through include(). Here is a functional example, when…
-
3
votes1
answer631
viewsImage inside an SVG
I’m using a svg, and inside it I put an image I get from a variable by Angularjs. So far so good, the image appears normally, but I want to leave it at width 100%. I’ve tried everything and it…
-
3
votes1
answer478
viewsHow to color SVG without path Fill?
Well, I tracked an image and I need to color it. The point is that it is not a geometric shape (T-shirt collar) and I need to give the user the option to color it. However, when exporting svg, the…
-
3
votes3
answers2323
viewsHow to do with CSS a checkered checkerboard background for Body?
I’d like to put in the <body> a checkered background, like a chessboard covering the whole body. I tried with repeating-linear-gradient(), but I couldn’t... html, body { width: 100%; height:…
-
3
votes1
answer47
viewsWhat is the difference between 'CSS Filter Effects' and 'CSS filter() Function'?
I’m researching about browser support for the property filter of CSS and the tag <filter> of SVG. My search link: https://caniuse.com/#search=filter What’s the difference between CSS Filter…
-
3
votes1
answer259
viewsHow to link to SVG objects?
I have this path: <path…
-
2
votes1
answer2117
viewsHow to add and remove classes when clicking an SVG path?
I am working with a map of Brazil in SVG, and I need that when you click on a state, it add the "active" class and remove the "active" class from the others. It also has the function of adding the…
-
2
votes4
answers864
viewsHow to set Background-image with SVG hosted elsewhere
I’m making a website that needs to pick up a svg from another site (www.teste.com.br/image.svg) and set it as the background. But I’m not getting it. go on like I’m doing: <html> <head>…