Rectangle 27 4

I have no idea what's going on under the hood, but there is an easier solution, at least for inline SVG's (not sure about backgrounds). Change:

<img src="svg-source.svg"/>
<object type="image/svg+xml" data="svg-source.svg"></object>

In addition, you need to make sure you have viewBox defined for the svg document.

According to this answer, using object is better practice anyway. Here is a decent blog post that recommends (for cross-browser compatibility):

<object type="image/svg+xml" data="svg-source.svg">
    <img src="png-version.png"/>
</object>

I have not tested this latter option, but if it works it is much simpler than this solution.

EDIT: I discovered that as embedded objects, SVGs were interfering with "hover" and "click" events, so I finally buckled and decided that I must embed SVGs fully. But I had no interest in pasting every single one, so I have the following at the top of my javascript file (I'm using JQuery):

$(document).ready(function()
{
    $('.deferred-load').deferredLoad();
}
$.fn.deferredLoad = function()
{
    $(this).each(function()
    {
        $(this).load($(this).attr('data-load'));
    });
}
<img src="svg.svg"/>
<div class="deferred-load" data-load="svg.svg"></div>

Of course, this doesn't work without Javascript enabled. But it's way better than pasting all that ugly XML.

css svg and vector-effect="non-scaling-stroke" browser compatibility -...

css svg
Rectangle 27 37

you can try this for svg vector drawable

DrawableCompat.setTint(myImageView.getDrawable(), ContextCompat.getColor(context, R.color.another_nice_color));

prefer this over the accepted answer, although both will work, but with this one I don't have to worry about what drawable to set, i just get the one already there, and it's also backward compatible, great!

Best answer when nothing worked iot work like a charm! Thanks a lot! Note: It also works for when you have a xml drawable in your imageView/AppCompatImageView

android - Change drawable color programmatically - Stack Overflow

android
Rectangle 27 13

<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-0.05 0 1195.1 703" preserveAspectRatio="xMidYMid meet" zoomAndPan="disable" transform="">
    <defs id="svgEditorDefs">
        <line id="svgEditorLineDefs" stroke="black" style="fill: none; vector-effect: non-scaling-stroke; stroke-width: 1px;"/>
    </defs>
    <rect id="svgEditorBackground" x="0" y="0" width="1195" height="703" style="fill: none; stroke: none;"/>
    <path stroke="black" id="e1_circleArc" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" d="M 198 207 a 117.969 117.969 0 1 0 213 8" transform=""/>
    <path stroke="black" id="e4_circleArc" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" transform="" d="M 411.348 215.696 a 349.677 349.677 0 0 0 -110.37 -131.718"/>
    <path stroke="black" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" transform="matrix(-0.182706 -0.983168 0.983168 -0.182706 157.664 417.408)" id="e6_circleArc" d="M 301.799 202.299 a 329.763 329.763 0 0 0 -102.951 -124.781"/>
</svg>

Why would you use a line inside a defs tag? And can't you do this shape in one path not 3 + a rect?

css - How do I create a teardrop in HTML? - Stack Overflow

html css css3 svg css-shapes
Rectangle 27 17

SVG is a markup language for vector graphics and has DOM. This makes it very easy to alter the content after its creation.

Canvas is a painting surface just like MS Paint without an undo button. You cannot alter the content. You only can overpaint it. It is very performant because the browser does not need to handle a complete DOM for the image. And there is a possibility that canvas can handle 3D drawing in the future.

html5 canvas element and svg - Stack Overflow

html5 svg
Rectangle 27 17

I am currently using PDFBox which has good support for graphic output. There is good support for extracting the vector strokes and also for managing fonts. There are some good tools for trying it out (e.g. PDFReader will display as Java Graphics2D). You can intercept the graphics tool with an SVG tool like Batik (I do this and it gives good capture).

There is no simple way to convert all PDF to SVG - it depends on the strategy and tools used to create the PDFs. Some text is converted to vectors and cannot be easily reconstructed - you have to install vector fonts and look them up.

UPDATE: I have now developed this into a package PDF2SVG which does not use Batik any more:

which has been tested on a range of PDFs. It produces SVG output consisting of

  • characters as one <svg:text> per character
<svg:path>
<svg:image>

UPDATE: We can now re-create running text from the SVG characters. We've also converted diagrams to domain-specific XML (e.g. chemical spectra). See https://bitbucket.org/petermr/svg2xml-dev. It's still in Alpha, but is moving at a useful speed. Anyone can join in!

UPDATE. (@Tim Kelty) We are continuing to work on PDF2SVG and also downstream tools that do (limited) Java OCR and creation of higher-level graphics primitives (arrows, boxes, etc.) See https://bitbucket.org/petermr/imageanalysis https://bitbucket.org/petermr/diagramanalyzer https://bitbucket.org/petermr/norma and https://bitbucket.org/petermr/ami-core . This is a funded project to capture 100 million facts from the scientific literature (contentmine.org) much of which is PDF.

What a fantastic little utility! Thank you very much for creating this!

Glad you like it. I have now created the second phase bitbucket.org/petermr/svg2xml-dev which recreates structured XML

This looks great, but I have no clue how to use it (not a Java dev).

Would love a tutorial on how to get that working...

Convert PDF to clean SVG? - Stack Overflow

pdf svg
Rectangle 27 17

I am currently using PDFBox which has good support for graphic output. There is good support for extracting the vector strokes and also for managing fonts. There are some good tools for trying it out (e.g. PDFReader will display as Java Graphics2D). You can intercept the graphics tool with an SVG tool like Batik (I do this and it gives good capture).

There is no simple way to convert all PDF to SVG - it depends on the strategy and tools used to create the PDFs. Some text is converted to vectors and cannot be easily reconstructed - you have to install vector fonts and look them up.

UPDATE: I have now developed this into a package PDF2SVG which does not use Batik any more:

which has been tested on a range of PDFs. It produces SVG output consisting of

  • characters as one <svg:text> per character
<svg:path>
<svg:image>

UPDATE: We can now re-create running text from the SVG characters. We've also converted diagrams to domain-specific XML (e.g. chemical spectra). See https://bitbucket.org/petermr/svg2xml-dev. It's still in Alpha, but is moving at a useful speed. Anyone can join in!

UPDATE. (@Tim Kelty) We are continuing to work on PDF2SVG and also downstream tools that do (limited) Java OCR and creation of higher-level graphics primitives (arrows, boxes, etc.) See https://bitbucket.org/petermr/imageanalysis https://bitbucket.org/petermr/diagramanalyzer https://bitbucket.org/petermr/norma and https://bitbucket.org/petermr/ami-core . This is a funded project to capture 100 million facts from the scientific literature (contentmine.org) much of which is PDF.

What a fantastic little utility! Thank you very much for creating this!

Glad you like it. I have now created the second phase bitbucket.org/petermr/svg2xml-dev which recreates structured XML

This looks great, but I have no clue how to use it (not a Java dev).

Would love a tutorial on how to get that working...

Convert PDF to clean SVG? - Stack Overflow

pdf svg
Rectangle 27 24

SVG would probably be easier to implement. I would look in to Raphael JS

Here is a relevant example of what raphael JS can do and how little code it takes

HTML5 Canvas or SVG world map - Stack Overflow

html5 canvas vector map svg
Rectangle 27 17

jVectorMap (http://jvectormap.com/) is a jQuery plugin that has built-in zooming and a nice world map example with an extensible events API and customization options. It uses SVG in all modern browsers like Firefox 3 or 4, Safari, Chrome, Opera, IE9, while offering legacy support for older versions of IE from 6 to 8 with VML. Really easy to use.

HTML5 Canvas or SVG world map - Stack Overflow

html5 canvas vector map svg
Rectangle 27 48

Your main.css file would only have an effect on the content of the SVG if the SVG file is included inline in the HTML:

<html>
  <body>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
      <path d="M28.44......./>
    </g>
  </svg>
</html>

If you want to keep your SVG in files, the CSS needs to be defined inside of the SVG file.

You can do it with a style tag:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="50px" height="50px" viewBox="0 0 50 50">
  <defs>
    <style type="text/css"><![CDATA[
      .socIcon g {
        fill:red;
      }
    ]]></style>
  </defs>
  <g>
    <path d="M28.44......./>
  </g>
</svg>

You could use a tool on the server side to update the style tag depending on the active style. In ruby you could achieve this with Nokogiri. SVG is just XML. So there are probably many XML libraries available that can probably achieve this.

If you're not able to do that, you will have to just have to use them as though they were PNGs; creating a set for each style, and saving their styles inline.

Does this mean that there is no method to benefit from caching the SVG and applying varied styling? Inline doesn't seem to cache well, while other methods would require creating many version of the image, eliminating any benefit from caching them.

I've attempted to follow this solution but I have some inline animation css that is not working on the SVG graphic. Is this a limitation of this technique? I can target the path fills with inline css just fine but animation css does not seem to work.

EDIT: Never mind, just discovered that SVG files have their own 'special' css (fill and stroke - can't find much else that's supported)

Another way is to encode the SVGs as background-image data uris, with different colours on each version and rely on gzip to reduce file size due to the duplication.

html - How to style SVG with external CSS? - Stack Overflow

html css svg stylesheet external
Rectangle 27 191

SnapSVG as a pure SVG version of Raphael

I've recently used both Raphael and jQuery SVG - and here are my thoughts:

Pros: a good starter library, easy to do a LOT of things with SVG quickly. Well written and documented. Lots of examples and Demos. Very extensible architecture. Great with animation.

Cons: is a layer over the actual SVG markup, makes it difficult to do more complex things with SVG - such as grouping (it supports Sets, but not groups). Doesn't do great w/ editing of already existing elements.

Pros: a jquery plugin, if you're already using jQuery. Well written and documented. Lots of examples and demos. Supports most SVG elements, allows native access to elements easily

Cons: architecture not as extensible as Raphael. Some things could be better documented (like configure of SVG element). Doesn't do great w/ editing of already existing elements. Relies on SVG semantics for animation - which is not that great.

SnapSVG is the successor of Raphael. It is supported only in the SVG enabled browsers and supports almost all the features of SVG.

If you're doing something quick and easy, Raphael is an easy choice. If you're going to do something more complex, I chose to use jQuery SVG because I can manipulate the actual markup significantly easier than with Raphael. And if you want a non-jQuery solution then SnapSVG is a good option.

The documentation of RaphaelJS isn't that great either, it's limited and you sometimes have to go into SVG or jQuery documentation to get all information. That said, with the demo's (source code) available as well as the forum and many users, I manage to get the answers I need.

I've just started using Raphael and found the documentation to be some of the best I've come across for a javascript API, with very clear examples next to the more formal specifications

Don't forget that RaphaelJS has backwards compatibility to VML for Internet Explorer. That's HUGE because SVG doesn't work on the older browsers.

Question was specifically about SVG, not backwards compatibility. If desire is cross-browser vector graphics, you're correct.

Another jQuery SVG con is that the project although the project is opensoucer (GPL and MIT) it seems to be abandoned by its developer (version 1.4.5 last update 28 april 2012). jquery.svg.dom causes some of conflicts with jQuery 1.8. Ideally I would wait for someone to take over the project and hopefully put it into github

javascript - jQuery SVG vs. Raphael - Stack Overflow

javascript jquery svg raphael
Rectangle 27 31

Yet another approach is to use mask. You then change the background color of the masked element. This has the same effect as changing the fill attribute of the svg.

<glyph class="star"/>
<glyph class="heart" />
<glyph class="heart" style="background-color: green"/>
<glyph class="heart" style="background-color: blue"/>
glyph {
    display: inline-block;
    width:  24px;
    height: 24px;
}

glyph.star {
  -webkit-mask: url(star.svg) no-repeat 100% 100%;
  mask: url(star.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: yellow;
}

glyph.heart {
  -webkit-mask: url(heart.svg) no-repeat 100% 100%;
  mask: url(heart.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: red;
}

One thing to note on this is browser support. I believe IE (as usual) is way behind on this.

Unfortunately mask is neither supported by IE nor Edge: caniuse.com/#search=mask

Does not work on IE 11 (11.608.15063.0)

html - Modify SVG fill color when being served as Background-Image - S...

html css html5 css3 svg
Rectangle 27 31

Yet another approach is to use mask. You then change the background color of the masked element. This has the same effect as changing the fill attribute of the svg.

<glyph class="star"/>
<glyph class="heart" />
<glyph class="heart" style="background-color: green"/>
<glyph class="heart" style="background-color: blue"/>
glyph {
    display: inline-block;
    width:  24px;
    height: 24px;
}

glyph.star {
  -webkit-mask: url(star.svg) no-repeat 100% 100%;
  mask: url(star.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: yellow;
}

glyph.heart {
  -webkit-mask: url(heart.svg) no-repeat 100% 100%;
  mask: url(heart.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: red;
}

One thing to note on this is browser support. I believe IE (as usual) is way behind on this.

Unfortunately mask is neither supported by IE nor Edge: caniuse.com/#search=mask

Does not work on IE 11 (11.608.15063.0)

html - Modify SVG fill color when being served as Background-Image - S...

html css html5 css3 svg
Rectangle 27 8

Simon is right that Raphael.js is a good bet. Check out their world example at: http://dmitrybaranovskiy.github.io/raphael/

If you are looking for something built on Raphael, but with zooming/locations, a commercial option is: http://simplemaps.com/world

HTML5 Canvas or SVG world map - Stack Overflow

html5 canvas vector map svg
Rectangle 27 7

I've found solution. Google Maps supports customization of water and landscape colors:

HTML5 Canvas or SVG world map - Stack Overflow

html5 canvas vector map svg
Rectangle 27 288

I have got the SO logo down to 300 characters almost lossless. My technique uses conversion to SVG vector art so it works best on line art. It is actually an SVG compressor, it still requires the original art go through a vectorisation stage.

For my first attempt I used an online service for the PNG trace however there are MANY free and non-free tools that can handle this part including potrace (open-source).

Here are the results

The next stage will be to embed 4 symbols (SVG path points and commands) per unicode character. At the moment my python build does not have wide character support UCS4 which limits my resolution per character. I've also limited the maximum range to the lower end of the unicode reserved range 0xD800 however once I build a list of allowed characters and a filter to avoid them I can theoretically push the required number of characters as low as 70-100 for the logo above.

A limitation of this method at present is the output size is not fixed. It depends on number of vector nodes/points after vectorisation. Automating this limit will require either pixelating the image (which removes the main benefit of vectors) or repeated running the paths through a simplification stage until the desired node count is reached (which I'm currently doing manually in Inkscape).

  • Documentation and cleanup
  • Color compression is acheived by throwing away 4bits of color data per color then packing it into a character via hex conversion.

As you can see there are some artifacts this time. It isn't a limitation of the method but a mistake somewhere in my conversions. The artifacts happen when the points go outside the range 0.0 - 127.0 and my attempts to constrain them have had mixed success. The solution is simply to scale the image down however I had trouble scaling the actual points rather than the artboard or group matrix and I'm too tired now to care. In short, if your points are in the supported range it generally works.

I believe the kink in the middle is due to a handle moving to the other side of a handle it's linked to. Basically the points are too close together in the first place. Running a simplify filter over the source image in advance of compressing it should fix this and shave of some unnecessary characters.

UPDATE: This method is fine for simple objects so I needed a way to simplify complex paths and reduce noise. I used Inkscape for this task. I've had some luck with grooming out unnecessary paths using Inkscape but not had time to try automating it. I've made some sample svgs using the Inkscape 'Simplify' function to reduce the number of paths.

Simplify works ok but it can be slow with this many paths.

Here's some ultra low-res shots. These would be closer to the 140 character limit though some clever path compression may be need as well.

autotrace --output-format svg --output-file cornell_box.svg --despeckle-level 20 --color-count 64 cornell_box.png

Unfortunately my parser doesn't handle the autotrace output so I don't know how may points are in use or how far to simplify, sadly there's little time for writing it before the deadline. It's much easier to parse than the inkscape output though.

Excellent! At first I wanted to create a hybrid vector solution with both sharp edges and smooth areas, but it proved far too complex without using a tracing library (which I didn't want to use). I'm looking forward to seeing how far you can get with your method!

Nice! I was hoping we'd see some attempts at near-lossless approaches by vectorization. It means it has lower generality, but higher quality for the images it does cover. It's fine to use an online service for vectorization. Good luck on getting the size down further!

I would consider image compression and character encoding as two different steps - Sam's technique seems to be optimal for the encoding, and could easily be built into a stand-alone program. You'll get more bang for your buck by concentrating on the unique part of your solution (i.e. the compression part) and just outputting a string of bits.

Simplified and despeckled.

unicode - Twitter image encoding challenge - Stack Overflow

twitter unicode compression
Rectangle 27 7

I used this POST for creating blur effect but I added coding base64.

img.blur { 
    filter: blur(3px);
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQoJPGZpbHRlciBpZD0iYmx1ciI+DQoJCTxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjMiIC8+DQoJPC9maWx0ZXI+DQo8L3N2Zz4=#blur);
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="blur">
        <feGaussianBlur stdDeviation="3" />
    </filter>
</svg>

css - SVG image blur on Firefox - Stack Overflow

css firefox svg
Rectangle 27 247

Expanding on @wdebeaum's great answer, here's a method for generating an arced path:

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;       
}
document.getElementById("arc1").setAttribute("d", describeArc(200, 400, 100, 0, 180));

and in your html

<path id="arc1" fill="none" stroke="#446688" stroke-width="20" />

I already upvoted, but I feel compelled to add here how useful this is. It is very useful.

This is super! Note that the arcSweep variable is actually controlling the large-arc-flag svg A parameter. In the above code, the value for the sweep-flag parameter is always zero. arcSweep should probably be renamed to something like longArc.

Thanks @PocketLogic, have (finally) updated as per your suggestion.

and don't forget to cut small amount of arc length like: endAngle - 0.0001, if not, full arc will not be rendered.

How to calculate the SVG Path for an arc (of a circle) - Stack Overflo...

svg
Rectangle 27 195

Everything in the g element is positioned relative to the current transform matrix.

To move the content, just put the transformation in the g element:

<g transform="translate(20,2.5) rotate(10)">
    <rect x="0" y="0" width="60" height="10"/>
</g>

Those answers are a lot newer and newer answers are mostly more relevant.

SVG Positioning - Stack Overflow

svg
Rectangle 27 5

As long as your webserver sets the proper Content-Encoding HTTP header it should work in all browsers that support SVG.

The one pitfall I know of is if you want to be able to open the svgz files from disk locally (that is: without using a webserver). That doesn't work in all browsers.

Also if your svg files are big, then you should consider preprocessing them with SVG Scour or similar. It's rather common to see vector graphics editors such as Illustrator and Inkscape output display-redundant data in the files (binary blobs or custom xml markup).

"As long as your webserver sets the proper Content-Encoding HTTP header it should work in all browsers that support SVG." Is this why Chrome (latest) gives a warning "Resource interpreted as Document but transferred with MIME type image/svg+xml." ?

html - What are the pitfalls of using SVGZs instead of SVGs? - Stack O...

html graphics svg vector-graphics
Rectangle 27 114

You want to use the elliptical Arc command. Unfortunately for you, this requires you to specify the Cartesian coordinates (x, y) of the start and end points rather than the polar coordinates (radius, angle) that you have, so you have to do some math. Here's a JavaScript function which should work (though I haven't tested it), and which I hope is fairly self-explanatory:

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = angleInDegrees * Math.PI / 180.0;
  var x = centerX + radius * Math.cos(angleInRadians);
  var y = centerY + radius * Math.sin(angleInRadians);
  return [x,y];
}

Which angles correspond to which clock positions will depend on the coordinate system; just swap and/or negate the sin/cos terms as necessary.

rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y

rx=ry=25 and x-axis-rotation=0, since you want a circle and not an ellipse. You can compute both the starting coordinates (which you should Move to) and ending coordinates (x, y) using the function above, yielding (200, 175) and about (182.322, 217.678), respectively. Given these constraints so far, there are actually four arcs that could be drawn, so the two flags select one of them. I'm guessing you probably want to draw a small arc (meaning large-arc-flag=0), in the direction of decreasing angle (meaning sweep-flag=0). All together, the SVG path is:

M 200 175 A 25 25 0 0 0 182.322 217.678

For the second example (assuming you mean going the same direction, and thus a large arc), the SVG path is:

M 200 175 A 25 25 0 1 0 217.678 217.678

(edit 2016-06-01) If, like @clocksmith, you're wondering why they chose this API, have a look at the implementation notes. They describe two possible arc parameterizations, "endpoint parameterization" (the one they chose), and "center parameterization" (which is like what the question uses). In the description of "endpoint parameterization" they say:

One of the advantages of endpoint parameterization is that it permits a consistent path syntax in which all path commands end in the coordinates of the new "current point".

So basically it's a side-effect of arcs being considered as part of a larger path rather than their own separate object. I suppose that if your SVG renderer is incomplete it could just skip over any path components it doesn't know how to render, as long as it knows how many arguments they take. Or maybe it enables parallel rendering of different chunks of a path with many components. Or maybe they did it to make sure rounding errors didn't build up along the length of a complex path.

The implementation notes are also useful for the original question, since they have more mathematical pseudocode for converting between the two parameterizations (which I didn't realize when I first wrote this answer).

looks good, will try next. the fact that if it is "more" of the arc (when the arc is more than half of the circle) and the large-arc-flag has to be toggled from 0 to 1 could introduce some bug.

ugh, why is this the api for svg arcs?

How to calculate the SVG Path for an arc (of a circle) - Stack Overflo...

svg