SVG Tutorial

Hello everybody,
I tried to complete the Tutorial-Weglog "How to Generate and Display SVG Graphics in ABAP, Part 1" by Siarhei Ulasenka. unfortunately when I tried to test the logo.htm I get the error message "Konnte nicht auf Datei zugreifen" (english should be something like "Couldn't access file")
Has anyone experiended the same? Or has a solution?
Regards
ALEX

Hello Alex,
The Corel SVG viewer has problems loading and displaying the examples (see the list of limitations at their site). Try to use the Adobe viewer instead.
Regards,
Sergei Ulasenka

Similar Messages

How to add a link to an interactive svg using edge commons library

Hi,
I've been playing around with this wonderful Edge Commons interactive SVG tutorial
My question is : How to add an external link "url" to an interactive svg using edge commons library ?
Edge commons example file :
http://edgedocks.com/market/interactive-svg-example-project-edge-commons
Edge commons video tutorial :
http://www.youtube.com/watch?v=4UEB6gaLKuw
I have adapted this tutorial to an interactive map, http://madudesign.com/works/france/ every thing is going fine until I couldn't figure out to link a particular url on each part of the region of the map.
I managed to figure out how to change colors on the different parts of the map on mouse over and mouse out but I'm not quite comfortable with JavaScript since I don't use it every day...
I have tryed to link to an url by passing it on the illustrator layer and via the onclick event (event.target.id) to a simple url
http://redpen.io/6svh5u
then working in Edge and publishing on the browser the link returns me a weird url line by replacing the original url slashes "//" by "_x2F_" and I must have misunderstood the proper JavaScript line to open that link from there...
for example on my actual exemple "http://madudesign.com/works/france/"
the first top region of France is normally a link to "http://www.google.com" and it returns "http:_x2F__x2F_www.google.com" plus the complete path to the file too...
I don't know how to get around this trick and have back for each region a particular clean link from the event target id of the svg...
thank-you for any help
matt
link to my edge animate file if needed :
http://madudesign.com/works/france/carte_de_france.zip

I got an answer from the Edge Commons dream team and I am very grateful to them :
"The problem that you bumped into was that you hadn't included a valid URL so far. We weren't sure if you wanted to include them within the SVG file or if you wanted to implement the functionality within Edge Animate. We came up with a solution for the latter one, with a simple switch in the js code:
You have to type in the appropriate URL of course for all the cases."
I have to share the final result:
http://www.madudesign.com/works/france/france_map/
And the zipped project file:
http://www.madudesign.com/works/france/france_map.zip
Thanks to Daniel & Simon
Matt

Font in svg file

I create a svg file with php which includes a dynamic text. Therefore I have embedded the used font with <font><font-face><glyph>....
This works fine with Chrome, but Firefox uses the standard font. How can I use an embedded font in the svg file?
Thanks in advance
Manuel

@Sourjobraato Banerjee: Sorry, I didn't get your point. The file was created by Adobe Illsutrator so it should be SVG 1.1 conform.
@jscher2000: You can see an example here: http://events.tsv-bodnegg.de/files/header.php?text=Example
The text "example" shout be shown in Roboto.
@core-el: The docs say that <font> is not implemented (https://developer.mozilla.org/en-US/docs/SVG_in_Firefox) but the tutorial (https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts) says it should work.
I have an image attached. It should look like the chrome version.

Need help with actively replacing text in SVG

I am new to Dreamweaver, Illustrator and SVG. Also, I do have a firm understanding of HTML but limited knowledge of Javascript and other languages. I am trying to create a website where the user is able to type in a form field (or something to that extent) and have the text in a displayed SVG be updated with the typed text. I've done extensive searching on the subject and come up with nothing that seems to work. Nor do I seem to be able to make it work.
I found a dead tutorial on the Adobe website which might help illustrate what I am trying to achieve:
http://www.adobe.com/svg/basics/text.html
ANY help would be GREATLY appreciated.
Thank you
Adam

Select the text. Copy to Clipboard. Open TextEdit. Paste. Resize its window appropriately. Choose Print off its File menu. Done.

How to Generate and Display SVG Graphics in ABAP

Hi everybody,
I tried to complete the Tutorial "How to Generate and Display SVG Graphics in ABAP, Part 1" by Siarhei Ulasenka (https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/ad83a990-0201-0010-d680-a189f8bc20fa).
Unfortunately when I tried the example to display an SVG Drawing in an ABAP Report I get the error message "Es ist ein Laufzeitfehler aufgetreten, ungültiges Zeichen" (english should be something like "Runtime Error, unkown character"). But it works when I open the svgfile in a new IE Window (parameter in_place from cl_gui_html_viewer->show_url). Also when I open a svg file from the local disc it works fine.
The code:
    CALL METHOD html_control->load_data
      EXPORTING
        url            = 'chart.svg'
        type         = 'image'
        subtype    = 'svg+xml'
      CHANGING
        data_table = lt_svg
      EXCEPTIONS
        OTHERS     = 1.
    CALL METHOD html_control->show_url
      EXPORTING
        url        = 'chart.svg'
        in_place   = 'X'
      EXCEPTIONS
        cntl_error = 1.
Has anyone a solution? Thanks in advance for your help!
Regards
Kathrin

Hello Alex,
The Corel SVG viewer has problems loading and displaying the examples (see the list of limitations at their site). Try to use the Adobe viewer instead.
Regards,
Sergei Ulasenka

Muse 2014.2 : when I copy and paste svg from Illustrator to Muse, i have no transparency.

Hello. Muse 2014.2 : when I copy and paste svg from Illustrator to Muse, i have no transparency. Only by importing saved svg file I have transparency.
In official Adobe (promo) Tutorial in the same operation - svg is transparent, link: Import SVG | Adobe Muse CC tutorials
Please help me!. It would be very usefull copy&paste svg with transparency.
Andrew Maola

Hi.
Thank you for explaining the theory about rendering in Muse but something doesn't work.
I'm running on Win7 - CC2014.2. on 2 different computers. Efe Of course the transparency displays correctly when I preview my page in the browsers (All browsers - also IE11).
Also in preview mode svg is very good but in design mode
In order to render the SVG at design time, Muse hands the SVG to Safari on the Mac and Internet Explorer on Windows and asks it for a bitmap. This bitmap is only used at design time and when viewing the site in a browser that does not support SVG. Unfortunately, the bitmap returned by Internet Explorer strips out partial transparency. Fully transparent pixels should be preserved at design time and all transparency should be preserved when you actually view your site in the browser.
We have not seen or heard of differences in the handling of transparent pixels between copy/pasting and save/import. Hence, I'm wondering if the copy/paste issue is only with partially transparent pixels and if the case that succeeds in a save/import workflow is for fully transparent pixels. To be clear, this transparency issue should only be during design time on Windows. There shouldn't be any issues on the Mac or in the browser.
Muse 2014.2 : when I copy and paste svg from Illustrator to Muse, i have no transparency.

Edge Commons - Interactive Svg Map

Hi folks!
I've watched the extraordinary video tutorial of the very talented guys from EdgeDocks (http://edgedocks.com) about how to build an Interactive Svg Graphic with Adobe Illustrator and Adobe Edge Animate: http://www.youtube.com/watch?v=4UEB6gaLKuw.
I've followed the example explained in the video tutorial using a Svg Map file and making selectable one region (the lower right, in light brown color) to try:
http://www.terredainventare.it/svg/MappaSvgInteractive.html
(project files: http://www.terredainventare.it/svg/SvgMap.zip)
So when I select this regione, Edge Animate replaces the placeholder text with the name of the path ("Isontino"), but when I click the red Ellipse, the color of the region remains in light brown. Why?
Many thanks in advance for your help!
Davide

Hi!
Following a precious hint of Simon Widjaja, the author of EdgeCommons libraries,
I've replaced
$(selectedPart).css("fill", $(e.currentTarget).css("background-color"));
with
$(selectedPart).each(function (index) {
$( this ).css("fill", $(e.currentTarget).css("background-color"));
beacuse my "SelectedPart" was a group in Adobe Illustrator and I need to select each element to fill it with color: but it doesn't work.
Where I am get wrong?
Here the update project files: http://www.terredainventare.it/svg/SvgMapEach.zip
Many thanks in advanced!
Davide

SVG files not rendering in Muse

When I place SVG files into Muse they do not render. I get a spinning wheel and the message 'Unable to generate thumbnail', however the image doesn't show in preview either. I have tried with files I have made myself from Illustrator and also tried files downloaded from the Katies Coffee tutorial. Any ideas?

There are multiple issues at play here:
1. The use of a slow IP by Muse's preview server resulting in the rendering of the SVG timing out and failing to draw. We believe we have a fix for this issue, for a future release, involving sorting the available IPs by their relative speed. Some people have worked around this issue by turning off Internet Sharing or using an Ethernet connection instead of a Wireless connection to the internet.
2. Muse does not allow Placed or Pasted SVGs to be resized smaller than 20x20px. This issue will be resolved in a future release, but can be worked around by importing the SVG as a Fill on a Rectangle and choosing a Fitting of "Scale to Fit."
3. A min height getting erroneously set on Placed/Pasted SVGs after attempting to resize. The effect of the erroneous min height problem is that it prevents a tight fitting height and at design time, a dashed line can be seen at the bottom of the graphic. This issue will be fixed in a future release.
4. Muse currently allows Placed and Pasted SVG to be resized, but not scaled. The only time that SVGs get scaled is if you import them as a background fill and set the fitting on the container to "Scale to Fit" or "Scale to Fill." If you Place or Paste an SVG, then changing the dimensions is not a scaling operation but a resize. A scaling operation is equivalent to putting a lens over the object. In a resize operation, the browser is given the new dimensions within which to render the SVG and the drawing operations within the SVG are executed, allowing the SVG to crop or behave responsively depending on the options chosen when creating the SVG. Typically, the result is that the SVG is scaled and centered to fit within the new dimensions, adding padding to the sides when necessary but sometimes it results in a cropped graphic - it all depends on the options chosen when creating the SVG and potentially how the browser has chosen to implement its support of SVG. Perhaps in the future we'll change the handling of these Placed/Pasted SVGs such that a resize gesture will result in a true scaling.

What am I doing wrong on this interactive SVG? Please help.

I watched the tutorial on youtube on creating the svg and making an interactive color changing character. I have tried to implement it but I’m not doing something right and am a little lost on the code. I was wondering if anyone could tell me what I am doing wrong.
The SVG File
Has 18 groups that can color change each in a different layer but not grouped within the layers
The layer names are as follows
Owl_Wing_Spots
Owl_Wings
Owl_Belly
Owl_Body
Trunk
Leaf_Outline
Leaf_1
Leaf_2
Leaf_3
E2_Ear_Spots
E2_Ear_Tail
E2_Body
E1_Ear_Spots
E1_Ear_Tail
         15. E1_Body
     16. Wall_Color
     17. Bird_Body
     18.   Bird_Butterfly_Wing
I put the notify(this, "select"); on each layer
I referenced http://cdn.edgecommons.org/an/1.0.0/js/min/EdgeCommons.js for the javascript file in AI and I also created a js file that is the same as the one in the video named svg.js (but neither made a difference)
The Edge Animate File
I added the SVG file named “elephant_tree2” and then added the following code to the CompositionReady Area
// Load Edge Commons
yepnope({
load: "http://cdn.edgecommons.org/an/1.0.0/js/min/EdgeCommons.js",
complete: function() {
                        // Enable SVG access
                        EC.accessSVG(sym.$("elephant_tree2")).done(
                                        function(svgDocument){
                                                        // add event listener
                                                        svgDocument.addEventListener("select", function(event) {
                                                                        // Remember selected part
                                                                        sym.setVariable("selectedPart", event.target);
                                                                        // show the id of the selected part in the textfield
                                                                        sym.$("selectedPartTxt").html( event.target.id );
// insert code to be run when the composition is fully loaded here
I added a selectedPartTxt text box and named it that too.
None of the groups on the SVG are recognized and the selectedPartTxt does not change. I suspect it may have something to do with the fact there are groups instead of one part but I don’t know how to fix it.
I was also wondering if someone could tell me how to use an SVG for the color chart too instead of recreating it in Edge Animate. I haven't tried to to the color part of the SVG because I still can't get the mouse click to work when on a group that changes.
Any help would be appreciated.
Thanks!
Cherie

Hi, I had a similar problem and this fixed it.
You know how in the illustrator file, you need to reference a file called svg.js from the edge commons library? Download that file, or write the code in a text editor and save it in a .js file and then make sure that the file is in the same folder as your images called by the adobe edge file.
I hope this works!
Liz

Convert PSD to transparent SVG (for ebooks)?

Hi folks!
I've been working on an ebook, in which I wanted to insert a couple of pages of sheet music that I'd scanned, and I split the music up into individual measures (i.e. "lines of music", if you're not familiar with music terminology) to make separate graphics from. On the MobileReads forum (for epublishers, etc.), it was suggested that the best way to go for something like this would be SVG format (as opposed to JPEG or PNG or GIF), but I've been having a heck of a time trying to get things to come out right. I'm using Photoshop/Illustrator CS6, by the way (and have the full Design Studio).
There are a couple of issues that I've been struggling with...
Firstly, for the life of me I can't seem to get my transparent PSD to come out as a transparent SVG -- indeed, I can't even get the PSD to retain it's transparency (not that I can "see", anyway) even just in opening it in Illustrator, never mind when I "save as" as an SVG. Although my original PSD is essentially a raster file (i.e. one layer of my scanned sheet music, with another layer of text), I did manage to figure out how to use the "Image Trace" function to convert it to vector (I used the "16 Colors" option), and then "saved as" SVG, but no matter what I try I just can't get it to be transparent (i.e. the sheet music and the text, but with no background)!
Secondly, the file sizes seem inordinately high. If I create a simple PNG from my image (which I have no problem making transparent), it comes out as a mere 18k, but saving as SVG makes it almost 20x the file size, coming in at a whopping 325k! I've looked at all of the options in the "save as" (SVG) dialog box, but most of it is all meaningless to me -- surely there must be a way to keep the file size down to a minimum?
Lastly, in searching all over the web for an answer to this, I saw reference to doing a "Save for Web and Devices" option, where supposedly SVG is one of the formats that one can choose in there -- neither in Photoshop nor in Illustrator do I have that, though, I only have "Save for Web", and SVG isn't an option in there. Did "Save for Web and Devices" only come out after CS6?
Thanks so much for any suggestions on this -- I'd be happy to load up my original PSD file (and/or the resulting SVG/PNG versions that I ended up with) if that would help. I gather I just click on the "Insert Image" icon to do that?ain,
Thanks again, in advance!

Thanks for the suggestion, but I would never InDesign or any other WYSIWYG editor to design my ebooks, I'm afraid! I started doing web design almost two decades ago, and got into ebooks a year or two ago, and do all my coding "by hand" -- I would never do it any other way. No offense to Adobe or any fans of ID, of course!
As I mentioned in my last follow-up, I did manage to figure out (via a tutorial on another site) how to get my SVG to be transparent, but I still just can't seem to figure out how to get the file size down. I've tried saving with all different sorts of options selected, but even still I can't get my image (that I've been using just to try to figure things out) below ~280k -- whereas the same image as a transparent PNG is a mere 18k. Speaking with others on the MobileReads forum, this seems ridiculously large, and there should be some way of getting the file size down. I'm actually thinking of looking into third-party programs (freeware, probably!) which might provide a solution, i.e. where I can create/save an SVG in Illustrator, but then run it through some other proggie just to get rid of all the "crap" and bring the file size down to something reasonable.
And my only other question (that's left over) is regarding that "Save for Web and Devices" option, of course -- I gather that's something that must have come out after CS6, though?

Porque en adobe muse no puedo visualizar los archivos .svg al momento de colocarlos,

tengo este problema en adobe muse no puedo visualizar las iamgenes .svg, me suele pasar en windows7 en windows 8 funciona sin problemas.

Mentes Creativas,
Acabo de descomprimir y abrir el archivo Muse del link al tutorial de la web de Adobe.
Entonces desde la carpeta de links he arrastrado varios de los .PNG que contiene a la página sin problemas.
Inicialmente veo un icono de Internet explorer, pero al cabo de un segundo o dos, aparece la vista previa en la miniatura.
Segun arrastro sobre la página, ampliando la imagen que coloco, se mantiene la previsualización.
Como en PrintScreen no aparece el cursor ni el icono la captura muestra la imagen segun se arrastra y amplia para colocarla (observa que es semitranslúcida).
Utilizo Google Chrome e IE 11. Windows 7 64bits y una tarjeta gráfica GF GTX 750Ti. Indica las características de tu ordenador para ver si puede estar ahí el problema.

Svg files place with incorrect preview

When I place SVG files in Muse the appear squashed on the Y Axis. The size of the bounding box is correct but the preview in Design view and Preview View are incorrect. When viewed in a browser all is normal.
This makes it difficult to design and place objects with any accuracy. Is there a setting somewhere that I have missed?
I have viewed and followed Dani's tutorial http://tv.adobe.com/watch/learn-adobe-muse-cc/scalable-vector-graphics-svg/
In addition to following the settings for saving SVGs as outlined here. https://helpx.adobe.com/muse/using/svg.html
Adobe Muse CC Version 2014.3 (3.1.44)
Adobe Illustrator CC Version 2014.1.1 (18.1.1)
Mac OSX 10.7.5
Muse Layout view
Muse Preview
Safari Browser view

When I place SVG files in Muse the appear squashed on the Y Axis. The size of the bounding box is correct but the preview in Design view and Preview View are incorrect. When viewed in a browser all is normal.
This makes it difficult to design and place objects with any accuracy. Is there a setting somewhere that I have missed?
I have viewed and followed Dani's tutorial http://tv.adobe.com/watch/learn-adobe-muse-cc/scalable-vector-graphics-svg/
In addition to following the settings for saving SVGs as outlined here. https://helpx.adobe.com/muse/using/svg.html
Adobe Muse CC Version 2014.3 (3.1.44)
Adobe Illustrator CC Version 2014.1.1 (18.1.1)
Mac OSX 10.7.5
Muse Layout view
Muse Preview
Safari Browser view

Advice on using Edge Animate & Interactive SVG to create an interactive map

Hello folks, I'm hoping for some guidance on a complicated graphic. My org. has an existing interactive map which was created by a freelancer for us using Ruby and js. It's very nice but I wanted to see if it's possible to recreate using Edge Animate (both as a challenge to myself and as a way of being able to move ownership of it in-house). Here's the map:
http://csai-online.org/sos
I have done a fair amount of work in Edge Animate but have mostly stuck with simple interactivity (play, repeat, navigation links, etc.) so this would be a stretch. But I'm thinking that the map itself (with various shadings) could be recreated using Edge Commons' Interactive SVG function. I would create the map in Illustrator as an svg with different layers for each group of states, which would then be activated by the buttons in Edge Animate. (The floating box could be done entirely in Animate.)
So my questions are,
- Does this seem doable, and has anyone done something similar?
- How do I trigger the layer visibility toggle from Edge? There's a tutorial from Edge Commons which changes the color of an object by CSS, but it seems like it would be simpler to use layer visibility.
- Some of the combinations of checkboxes result in States that are in multiple groups (resulting in a striped fill). I'm guessing I'd need to add some code to indicate that if buttons X and Y were both checked, a third combined layer would be shown. (A further complication is that each of the groups of buttons shuts off the other groups.)
Alternately, it seems like I could also create each state as a series of differently-colored graphics which are then shown or hidden based on which buttons are checked (using arrays, maybe?), but that seems a messier due to the million separate images.
Anyway, how would you approach this problem, I guess is my main question.
Thanks very much.

This looks pretty simple to me and I don't see why you wouldn't be able to do it in edge animate.
Create each state as a button and animate the hover effects inside a symbol and then on the main timeline animate the content boxes opacity to on and off and set labels for each "on" state and then in your button link to that label in the mouse over actions preset.u
As far as calling the bottom content into the div i would just do that by hand by grabbing a simple script off the internet. *theres loads*

I can't sync my iPhone5 to iTunes. The tutorial said to click on devices, but I don't see it anywhere on my computer screen. HELP!

I am trying to sync my iPhone 5 to iTunes in order to download some new tones. I did this back in December and didn't have any trouble. Now I can't seem to do it. The tutorial says to click ITunes open and then click on devices. I don't see devices anywhere on my computer. I do have my phone physically plugged into the computer, so I don't know why it isn't showing devices or the option of "Sync Now". What am I doing wrong? It's probably something very simple I'm overlooking.

It is referring to under devices in the iTunes source list, not on your desktop.
http://support.apple.com/kb/ts1538

Where can I find a tutorial about Show Folders Hierarchy?

I have Permiere Elements 11 which also has the Elements Organizer as part of the program. And I have Photoshop Elements 10 also. The Elements Organizer with the video editing program is what I'm interested in though. I think my folder hierarchy is not right. I'd like to straighten it out but I don't know how. Can someone direct me to a tutorial on how to work with the Folders Hierarchy.
This might be a different question, but it might be related to my confusion about the Folder Hierarchy in the Organizer. On June 10 I was copying some photos from my hard drive to the Organizer - probably a dumb thing to do. While I was doing this, the Pictures folder (View and organizes digital pictures) no longer took me to all my photos on the hard drive. The Pictures folder is under Personal Folder, Documents, Music, Control Panel on the Windows 7 desktop to the right of the Start Menus stuff.
When I click on Pictures now I get two folders: Adobe and Pictures. The Adobe folder has these values - Size: 0 bytes; Contains: 0 Files, 1 Folder; Created: Monday, June 10, 2013; Attributes: Read-only (only applies to files in the folder. I deleted the Abobe folder several times but it keeps coming back.
What I would really like to do is to restore my Pictures folder to its original state so that I will have access to all my hard drive photos immediately instead of clicking around in those folders. I vaguely think that something I did to the folder hierarchy in the Optimizer has messed up other things on my computer.

You wrote, "So if you moved the files, what you need to do is move them back..."
I don't know how to do this. Could you tell me how. I moved about 50 photos into the Organizer. Now I know I should not have done this. I'd like to correct the mistake.
When I click on the Show Folder List icon this is what I see:
My Pictures
     Pictures
          Faces
               Clowns
     My Videos
     Computer
               C:
               Program Data
               Users
                    Tommy
                          Faces
                               Dancing
                               Faces
                               Lovers
                               Racing
                               Tommy
                     Pictures
              D
              E
              F
              G
This makes no sense to me. But I could live with it - except perhaps something I did has made my PrE11 impossible to work with. When I put new clips via the memory card into the program, they do not go into the Timeline. All I get is an error message.
I like the Adobe programs and don't want to give up on them, especially since my problems probably have been self-imposed.

SVG Tutorial

Similar Messages

Maybe you are looking for