I'm looking for an app or a script (web service) that can clean up SVG files, by that I mean removing possible copious data such as metadata. When creating the SVG file I've used standard settings in Adobe Illustrator. Upon export the paths look like this -
M 678.567,252.999 c-0.546-1.307-3.898-3.118-5.005-4.007c-1.596-1.276-1.42-3.375-3.09-4.381c-4.297-2.571-9.604-3.125-13.746-5.916
While I need them be cleaned up and reordered in way like this -
M 600.375,693.40625 598.75,695.03125 596.125,694.34375 594.57422,700.50391 592.25,700.16406 591.875,702.59375 593.875,705.53125 592.75,706.40625 593.9375,710.53125 592.75,710.65625 590.3125,712.90625 589,711.96875 587.1875,712.90625 586.8125,711.40625 584.125,710.53125 581.9375,711.03125
Fairly new to working with SVG. What I need these paths for is drawing up a map with Raphael JS and it seems only to take the paths in that particular way.
I tried Scour (http://www.codedread.com/scour/) but with no success unfortunately (the web service isn't working and there were problems running the procedure with Terminal).
To me it looks like Raphaël should support all of the path syntax in SVG 1.1.
Anyway, ReadySetRaphael.com is a site that provides conversion of a subset of SVG to Raphaël code.
Convert .ttf (or other format) to .svg: https://everythingfonts.com/ttf-to-svg .
Convert the svg. to icons separated icomoon.io/app/#/select,
-Import icons'
-Select the icons that you want export
-Click en 'Generate SVG, PNG, PDF'
Related
We are looking at using the Forge Viewer for a project to display and markup plans, etc. (for now just 2D, 3D may be added in the future). For some of these items we will have DWG Files that we can convert using model derivative API so no problem there. However, the client also has quite a few existing drawings saved in svg format from their legacy system.
The question is if there is a good way to convert those base svg files into svf that we can display as the 'main' drawing/view in Forge Viewer. I have found things about creating a markup layer from an svg file, but that's not really what we want. We would be using markups to have the user draw on top of the plan with their own tools and place markers, etc. but the main drawing should be from the svg file that they have.
Forgive me if this is simple but I'm fairly new to the viewer and model derivative API so I'm not figuring out how to make this work.
There is no translation support for SVG, to generate an SVF model out of it.
You could either
a) use the SVG inside a format that we support (e.g. DWG - perhaps place the SVG in it using Design Automation API) and translate that to SVF
b) load a dummy model as shown here, and then add the SVG as e.g. markup
On my TYPO3 v10 website I have some SVG icons in use, no problem.
I also have a few more complex SVG Figures (created with Inkscape), that I want to include in TYPO3 website. Of course I can upload the .svg files to the fileadmin/ folder, and link to them with the Text+Image (or Text+Media) Content Elements.
In the Backend, TYPO3 generates some fine png-thumbnails for preview. So far so good.
The file can be downloaded directly, from its fileadmin/images ... location.
However, inside web pages, my SVGs are not displayed as they should.
A lot of styling information gets removed from the SVG and I don't know where.
Here is a screenshot of the original vs corrupted image (as displayed in the TYPO3 frontend).
Here is a graphical diff that shows the difference between the figures.
It turns out that at some time during the rendering process, TYPO3 removes the values from the style="...." SVG attributes. See reddish boxes.
All my more complex SVGs look like the one on the right when embedded in TYPO3.
Here is the SVG if you want to try yourself: image on SVGshare.com
On the right, many style attributes have been set to style="".
but why?
It's Firefox, not TYPO3, who removes the style="..." attribute values. This seems to be a longstanding Firefox Issue, solved.
See Bugzilla Issue 1262842: [CSP] Blocks the use of style attributes inside SVG without generating console errors.
Look for "triply confusing" in the first comment.
Inline CSS styles can be a security Problem, and therefore Firefox has a Content-Security-Policy (CSP) in place, in order to correct this.
An explainer for the mitigation strategies, written jointly by professional Security Engineers is given in this Google Doc and in Gihub Repo (Content Security Policy), Issue 45, Further granularity of unsafe-inline styles.
Script inline attributes are a difficult subject to approach when it
comes to CSP, they have the same amount of power as any other script
element but they don’t have ways to be whitelisted, for example, by a
nonce or hash. This means that the actual content of the attribute is
mostly the only deciding factor.
I don't understand everything mentioned in these docs and discussions. Inline-style Elements seem to be vulnerable to XSS attacks, and then attacker can put CSS url() in there for instance.
Quick-and-dirty solution
Use Inkscape and save as "optimized SVG", and check the option "Convert CSS Attributes to XML attributes". See attached screenshot of the Inkscape Dialog (Linux).
This solution was proposed by a web-developer from the GIMP devteam.
TYPO3 9 introduced an SVG Sanitizer, which automatically modifies SVG files during "fileadmin upload time", meaning it removes any <style ...> elements from the uploaded SVG file.
In TYPO3 10 and later versions, this SVG Sanitizer is by default automatically set up via Symfony dependency injection via core's Services.yaml.
You can remove the SVG Sanitizer via your own site extension's Services.yaml, e.g. for your myextension/Configuration/Services.yaml:
services:
_defaults:
autowire: true
autoconfigure: true
public: false
# ...
# remove TYPO3's default-autowired SvgSanitizer, which tampers with filadmin uploaded SVGs (e.g. removes necessary <style> information)'
TYPO3\CMS\Core\Resource\Security\SvgEventListener: ~
The tilde (~) removes/overwrites the definition previously set up by core's Services.yaml ( https://symfony.com/doc/current/service_container/service_decoration.html ).
This seems to be a problem of your individual TYPO3 installation. I've just tested your SVG image in a brand new TYPO3 v10 installation and the image is rendered properly in backend and frontend.
Maybe you have some 3rd party extensions installed who postprocess the HTML output of TYPO3, e.g EXT:sourceopt or EXT:scriptmerger.
For a mobile app (built with the Ionic framework), I want to use a diagram I created with Google Spreadsheets. Following the steps described on this page I managed to save the diagram as an .svg file by copying the svg code shown in Chrome Dev Tools.
I then used the .svg file in the src attribute of the img tag, as described in this question.
Unfortunately, this does not show the image. Does the svg code of Google contain some code which doesn't make it render? Here is the link to the svg code.
Standalone external SVG must have a namespace declaration. They are XML files and the browser needs to know what type of XML they are (in this case an SVG).
You'll need to alter the first line of the SVG file to:
<svg xmlns="http://www.w3.org/2000/svg" width="786" height="459" overflow="hidden">
Try that.
I have an SVG file that references lots of other, smaller, SVGs as sub images. Effectively, the main SVG is the template that positions all the other ones.
I'd like to create a single image that I can pass on to people - i.e. a data ref or just inline inclusion - but running the inkscape Embed Images extension results in the error "images are not of type PNG, JPEG, etc".
So it sounds like the inkscape (v0.48.5) extension can only intern bitmap images, not SVGs. Bummer.
My images are referenced from the master SVG like this
<image id="PGDOWN_R1" x="1436.5" y="280" xlink:href="./symbols/PGDOWN_R3.svg"/>
So how can I automatically intern/embed all my externally referenced SVGs? (non-inkscape CLI options are welcome too)
At least as of Inkscape 0.91 you can do this through this menu:
Extensions → Images → Embed Images
Quite easily! 🎉
I ended up using xmllint to parse an SVG file with handles into a file containing the embedded versions of the referenced files, which is not exactly what I mean but it suited my purposes: https://gitlab.com/fommil/attic/blob/master/kinesis-dvorak/create.sh#L37
xmllint --xinclude picture.svg > picture-embedded.svg
I am trying to create an interactive map where users can click on different provinces in the map to get info specific to that province.
Example:
archived: http://www.todospelaeducacao.org.br/
archived: http://code.google.com/p/svg2imap/
So far I've only found solutions that have limited functionality. I've only really searched for this using an SVG file, but I would be open to other file types if it is possible.
If anyone knows of a fully functioning way to do this (jQuery plug-in, PHP script, vector images) or a tutorial on how to do it manually please do share.
jQuery plugin for decorating image maps (highlights, select areas, tooltips):
http://www.outsharked.com/imagemapster/
Disclosure: I wrote it.
Sounds like you want a simple imagemap, I'd recommend to not make it more complex than it needs to be. Here's an article on how to improve imagemaps with svg. It's very easy to do clickable regions in svg itself, just add some <a> elements around the shapes you want to have clickable.
A couple of options if you need something more advanced:
http://jqvmap.com/
http://jvectormap.com/
http://polymaps.org/
I think it's better to divide my answer to 2 parts:
A-Create everything from scratch (using SVG, JavaScript, and HTML5):
Create a new HTML5 page
Create a new SVG file, each clickable area (province) should be a separate SVG Polygon in your SVG file,
(I'm using Adobe Illustrator for creating SVG files but you can find many alternative software products too, for example Inkscape)
Add mouseover and click events to your polygons one by one
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"
onmouseover="mouseOverHandler(evt)"
onclick="clickHandler(evt)" />
Add a handler for each event in your JavaScript code and add your desired code to the handler
function mouseOverHandler(evt) {};
function clickHandler(evt) {};
Add the SVG file to your HTML page (I prefer inline SVG but you can use linked SVG file too)
Upload the files to your server
B-Use a software like FLDraw Interactive Image Creator (only if you have a map image and want to make it interactive):
Create an empty project and choose your map image as your base image when creating the new project
Add a Polygon element (from the Shape menu) for each province
For each polygon double click it to open the Properties window where you can choose an event type for mouse-over and click,
also change the shape opacity to 0 to make it invisible
Save your project and Publish it to HTML5, FLDraw will create a new folder that contains all of the required files for your project that you can upload to your server.
Option (A) is very good if you are programmer or you have someone to create the required code and SVG file for you,
Option (B) is good if you don't want to hire someone or spend your own time for creating everything from scratch
You have some other options too, for example using HTML5 Canvas instead of SVG, but it's not very easy to create a Zoomable map using HTML5 Canvas,
maybe there are some other ways too that I'm not aware of.
Just in case anyone will search for it - I used it on several sites, always the customization and RD possibilities were a perfect fit for what I needed. Simple and it is free to use:
Clickable CSS Maps
One note for more scripts on a site: I had some annoying problems with getting to work a map (that worked as a graphic menu) in Drupal 7. There where many other script used, and after handling them, I got stuck with the map - it still didn't work, although the jquery.cssmap.js, CSS (both local) and the script in the where in the right place. Firebug showed me an error and I suddenly eureka - a simple oversight, I left the script code as it was in the example and there was a conflict. Just change the front function "$" to "jQuery" (or other handler) and it works perfect. :]
Here's what I ment (of course you can put it before instead of the ):
<script type="text/javascript">
jQuery(function($){
$('#map-country').cssMap({'size' : 810});
});
</script>
Go to SVG to Script
with your SVG the default output is the map in SVG
Code which adds events is also added but is easily identified and can be altered as required.
I have been using makeaclickablemap for my province maps for some time now and it turned out to be a really good fit.
I had the same requirements and finally this Map converter worked for me. It is the best plugin for any map generation.
Here is another image map plugin I wrote to enhance image maps: https://github.com/gestixi/pictarea
It makes it easy to highlight all the area and let you specify different styles depending on the state of the zone: normal, hover, active, disable.
You can also specify how many zones can be selected at the same time.
The following code may help you:
$("#svgEuropa [id='stallwanger.it.dev_shape_DEU']").on("click",function(){
alert($(this).attr("id"));
});
Source
You have quite a few options for this:
1 - If you can find an SVG file for the map you want, you can use something like RaphaelJS or SnapSVG to add click listeners for your states/regions, this solution is the most customizable...
2 - You can use dedicated tools such as clickablemapbuilder (free) or makeaclickablemap (i think free also).
[disclaimer] Im the author of clickablemapbuilder.com :)
<script type="text/javascript">
jQuery(function($){
$('#map-country').cssMap({'size' : 810});
});
</script>
strong text