SVG Objects

Is there an SVG library that we can download on the internet from either SAP or any that are on a free site?

Helpful resource
http://en.wikipedia.org/wiki/SVG#Libraries
http://www.eclipse.org/tptp/platform/documents/design/ChartingService/concepts/ctpchrtov.html
Message was edited by:
xMII_Training

Similar Messages

Line break in an SVG object

Hi friends,
I am using an SVG object to create a pdf from BLS.I am assigning a string value to a variable pre-defined in that SVG object.The problem here is i am unable to get carriage return in that string(string is of huge length) which is being displayed on the PDF.It is getting out of the PDF created.I had used 'crlf' but it is not working.Any suggestions on this would be really appreciated.
regards,
Ravi Kumar
Message was edited by:
Ravi Kumar

Hi, Ravi.
One of the cool things about SVG is that it is nothing more than an XML document! So, you have two options to achieve what you would like to do:
Solution 1 involves using the animation editor's expression capabilities to meet your needs:
1a) If you can assume a "maximum" number of lines (let's assume 8 line items maximum), you can place all 8 text objects in their correct position on the SVG object (and name the SVG element ID's something like TextLine1,TextLine2, etc.). In the animation editor, provide 8 input properties (of type String) corresponding to these text values. In fact, let's call them TextLine1,TextLine2...TextLine8.
1b) In the animation editor, link the these properties to the corresponding text property for each of your 8 SVG elements.
1c) Now, here's the magic part: link the following expression (adjusted for each text line item) to the "visibility" attribute of each of your 8 SVG elements.
stringif(stringlength(TextLine1) > 0,"visible","hidden")
1d) Then, in your BLS transaction you'll need to split your list of barcode items and loop through them or assign them. I'm not sure what your query is returning, but I'm sure there's a way, either with the functions or the web scraper (a RegEx parser) to do what you need. Let us know more specifics, and we can provide some guidance.
There's one other approach that takes advantage of the fact that an SVG document is nothing more than a special type of XML document. In this case, instead of "pre-adding" a fixed number of items, you'll simply use the "append XML" link type and a local property of type XML, which will contain your SVG text element, to dynamically add any number of items.
The key with these approach is to dynamically calculate the x and y positions for each text item (usually based on some fixed height), assign these attributes as well as the text content to a Local property, then append this to the SVG.
You have a few choices for how to load the SVG. One option is the XML Loader. However, you can mix the capabilities of the AnimatedObject + direct SVG manipulation as well.
Option 2a is to use the XML loader, manipulate the XML with assignment actions, then use the SVG renderer to convert it to an image.
Option 2b is to use the AnimatedObject action, which outputs both XML and an (optional) image - you should turn off "Render Image" in this case. You can then manipulate the SVG output to add your text items, and send this to an SVG renderer to convert it to an image.
The advantage of approach 2b is that you can use the standard functionality of the AnimationObject to make the easy stuff, and extend it with SVG manipulation for your "super dynamic" stuff.
Hope this helps,
Rick
R

SVG objects with the feSpecularLighting filter effect do not display

When I open a Scalable Vector Graphics (.svg) file in Firefox, any objects having filters that contain the <feSpecularLighting> filter primitive, do not display at all and in rare cases, even causes Firefox to crash.
For example:
*http://upload.wikimedia.org/wikipedia/commons/e/ee/Video_game_health_bar.svg
It should render like this:
*http://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Video_game_health_bar.svg/3000px-Video_game_health_bar.svg.png

In order to get the SVG file to render like the PNG, you need to edit kernelUnitLength from 0.01 to approximately 1.0 (or delete it). Not sure whether something might have changed in how Firefox handles this attribute to cause such a drastic difference.
I should test in a clean profile to see whether I get the same result...
''Edit: Same result in a clean profile, i.e., no extensions or settings changes from factory default.''

Add desc element to SVG object

I am exporting drawings as SVG files and I am looking for a way to attach a description to a rectangle or other object such that it is exported in the SVG as a <desc> element. I not found anyway to add metadata like this to individual elements in a drawing. It looks like the API has a "note" property that can be assigned to a PathItem. Is there a way to add these notes in the UI?

Thanks! I found the notes panel there. But unfortunately this doesn't come out in the SVG output. I'll keep digging.

SVG objects moved and reflected when reopened in Illustrator

Hi,
After saving illustrator files in SVG format and then reopening, the objects are reflected (horizontally) and moved off the artboard. The objects are imported PNG screen captures and line drawings (such as a hand or pointing finger).
Also, we select the Embed option for the images; however, when we reopen it, that option is unselected if we just save. We have to select "Save as" to select Embed again.
The image below shows the SVG options we're using.
Thanks in advance for any ideas.

Hi Peter,
Yeah, that's exactly what's been happening to us, and yes, some of the embedded graphics are svgs. We need to embed them for our CMS.
We just tried opening an EPS illustration with numbered callouts, and then saving as SVG. When we reopened, all the callouts save one were missing, and the one that was present was way off the artboard. Then I tried saving with "Preserver Illustrator Editing Capabilities" enabled, and that seemed to solve the problem. I tried it on your graphic too, and it seemed to work.
Thanks for pointing me in right direction! Hope this is it...

Firefox 4 displays closing CDATA tag ]] on the screen for object tag

With the recent Firefox 4 version. I am facing following problems with the website I am developing:
1. For svg objects inside html page with Firefox 4 it now displays closing CDATA tag on the screen.
It only displays ]]> on the screen.
I have object specified using
<pre><nowiki><object class="svgobj batteryGraphObj" type="image/svg+xml">
<![CDATA[
<?xml version="1.0" encoding="UTF-8"?>
]]>......
</object></nowiki></pre>
2. When the svg is added using div tags it doesn't display on the screen if the width is more than browser width. It was working on Firefox 3.6 but have stopped working with 4. We had a overflow specified with scrolling effect on the screen if user wants to view next section.

A good place to ask questions and advice about web development is at the mozillaZine Web Development/Standards Evangelism forum.<br />
The helpers at that forum are more knowledgeable about web development issues.<br />
You need to register at the mozillaZine forum site in order to post at that forum.
See http://forums.mozillazine.org/viewforum.php?f=25

Question for experts: SVG vs GIF

Hello everyone
Lets say I have a website that is populated with multiple simple and complex, plain white icons. These icons will be resized in muse where needed, sometimes they will be with reduced opacity. The website is heavy on parallax scrolling and fading (opacity), and most – if not all – of the icons will be using one or both scrolling effects.
Exporting them from illustrator the GIFs are sometimes smaller in size than the SVGs.
The target audience is expected to have decent and updated computers e.g. IE 8 and below not relevant. let us suppose all users have Browsers capable of handling SVGs, and parallax.
What is better or easier for the browser? SVGs of GIFs? even if the size of the GIFs is smaller?
is rendering somewhat complex SVGs (many anchor points) "harder" than GIFs?
Any reason to not prefer SVGs except for backwards compatibility with older browsers/machines?
What would be best practice here?
Any advice/discussion/opinion greatly appreciated.
Jorge Vallejo

First, GIF should be avoided in favour of PNG: a well optimized PNG is always smaller in file size and also offers more quality options (for example more than 256 colours that GIF allows for). The trouble is that Adobe products cannot achieve this without jumping through a LOT of hoops. More about that below.
Here is a bitmap - SVG performance comparison:
1) SVG files must be drawn & rendered in the browser. That means the xml data must be read, interpreted, and displayed - which is far slower than a bitmap. A png still has to be decompressed, which does not take up a lot of processing power. Rendering a SVG is far slower (incomparably slower depending on the complexity).
2) bitmaps are generally hardware accelerated (via the GPU), a number of svg operations are not. For example, I believe css transforms for SVG is not hardware accelerated, and thus very slow to animate through that method.
3) somewhat older browsers have trouble rendering many individual SVG objects. For example, only in March 2014 was this issue resolved in Firefox.
4) svg performance is highly dependent on the specific browser as well. Take this test:
http://jsperf.com/d3-svg-opacity
It runs fastest on Opera and IE 11 on my system! Firefox is dreadfully slow.
5) SVG rendering is far slower on mobile platforms. Unless very simple ones, convert to png files.
Now, as to your files: an SVG sized at 500kb is a LOT - and then you mention you will have more SVG files ranging from less then 100kb up to more than 200kb. My question would be what type of graphics these will be in your page: background graphics, icons, ...?
Besides, SVG images produced by Illustrator can (should) be optimized. A good tool for that is SVGO: svg/svgo · GitHub a visual version can be downloaded at svg/svgo-gui · GitHub
Some must-read articles:
http://css-tricks.com/using-svg/
http://jaydenseric.com/blog/how-to-optimize-svg
http://kylefoster.me/svg-slides/#/
If you are doing a lot of animation, and there are a lot of other things going on in a page, then PNG is the way to go. SVG is best for simpler logo graphics and icons. Game developers using Flash also always convert all their vector files to bitmaps for much improved performance in Flash!
Now to my second point: Adobe's Save for Web function is abysmal for png optimization. Yes, there are techniques in Photoshop to improve the optimization of PNG images, but it takes a lot of effort:
http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/
PNG Optimization Guide: More Clever Techniques - Smashing Magazine
And even after all this work, you still cannot export a PNG with a limited colour palette with full transparency in either Photoshop or Illustrator. This is important for file sizes: especially Muse websites tend to be so bloated that they take a long time to load up - and there is really no reason for this if you optimize your graphics properly.
To optimize any PNG file, use Colour Quantizer:
Color quantizer
I cannot live without this little (freeware) tool anymore - it is worth booting your mac in Windows mode just to use CQ to optimize your png files. It automatically takes care of optimizing your png files, reducing them to the absolute minimum - compared to Photoshop's standard Save for Web disaster, file sizes are at least 50% smaller in file size or more. And it includes a very simple to use quality mask brush that allows you to control/fix areas which may be troublesome when reducing the number of colours.
Having said that, it really depends on the type of graphics you are intending to place in your layout. Could you post some examples?

SVG Image blurred

Hi,
       I am using an SVG image to be displayed on a pdf file.But the quality of image on pdf is not very clear.I had took printout of SVG object and pdf file and checked for the difference.SVG object printout is crystal clear and pdf printout is dotted and blurred.Is there anyway i can improve the quality of the image so generated on PDF?
regards,
Ravi Kumar.

Hi Rick,Sacha
      Actually my SVG image doesn't possess any embedded images.It just consists of a text and a barcode which is to be displayed on a pdf file.I am observing the quality of the pdf to be very low after rendering.It's showing in the form of close dots.But the size of dots are huge enough to be noticed.(Pdf printout is not getting printed properly).
      I had tried converting into .png and .jpeg format and observed the images.It's showing up in the same way.It may be due to sharp changes in contrast as Sacha mentioned.Is there any way in which i can improve the quality of image.I don't mine if i get the output in other format but it should be in a good printable format?
Regards,
Ravi Kumar.

Error in MII 12.1.2 Animated Object

Hi All,
I am using MII 12.1.2 and have a problem with animated or SVG object.
I have downloaded animated objects for MII 12.x from below link:
"https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/webcontent/uuid/70e0837a-b080-2a10-878b-f83574a09dbb [original link is broken]"
and imported animated and SVG Objects into MII 12.1.2 default project.
but when i am going to "select SVG object" in "animated object" on "workbench" it is giving me "null Error".
In MII 12.0 same thing is working fine.
is there any solution for above problem.
Edited by: Manoj Bilthare on Jul 24, 2009 8:25 AM

Manoj,
You have to select SVG object,not animated object.Select that then animate it by mapping the properties.save as animated object
Then use this animated object in BLS transaction.
SVG as .svg extension and animated is having .sva extension
-Suresh

How do I configure WL6.1 to download svg Mime Types?

I am trying to not only display an svg object on my screen, but also have full access to its SVGDocument object via Javascript in the pages that contain the embedded svg object. It works perfectly when I open it in a browser directly, but not from Weblogic.
          I can even serve it up on Weblogic, save the results of my JSPs as html, and open it from the file system and the code works fine.
          It's as if Weblogic is not protraying the embedded svg as a valid object with an object model.
          I have tried the following:
          1) I changed my .svg file to a .jsp and added the following line to try and force the browser to recognize it:
          <%@ page contentType="image/svg xml"%>
          2) I configured the svg mime type directly on the console.
          3) I also made sure that my WEB-INF/web.xml looked like this:
          <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.2//EN" "http://java.sun.com/j2ee/dtds/web-app_2_2.dtd">
          <web-app>
          <mime-mapping>
          <extension>svg</extension>
          <mime-type>image/svg xml</mime-type>
          </mime-mapping>
          <welcome-file-list>
          <welcome-file>index.html</welcome-file>
          </welcome-file-list>
          </web-app>
          Any ideas? Thanks so much!


I've noticed this too. The issue seems to be that it considers space in and around your server tags significant. The best way to cut down on the space is to group your server tags and code closer together. Or course, this sacrifices a bit of code readability. You can either try to strike a balance between readability and white space, or try writing a small app that adds and removes unneeded whitespace from your jsp. That way you could pass the file through your formatter before posting it to yoru server and pass it back through to read it.

SVG example

Hi
anyone has any example of html / irpt code how I could view the SVG object.
1. I have SVG dynamic object
2. I have a simple transaction for it
3. How do I see it in my webpage??
thanks.

Many thanks
I want to do it different way, I want to call the Runner service directly in the html. I have created the transaction and save the png file.
http://chsemsapd201:51000/XMII/Runner?Transaction=Demo_Graphic/test&Outputparameter=OutputImage&Content-type=image/png" name="test
1. The transaction is being called and the image was created but I do not see my image in the web. Does above
2. Does anyone know where in the help file I could find the usage of Runner ???? I search it but could not find it.
I also tried this way
1. Created a BLS to save new immage - succesfull (isee the file)
2. Created a Xcute for this BLS - succssfull
3. in HTML
     <APPLET NAME="test" WIDTH="1" HEIGHT="1" CODE="iCommand" CODEBASE="/Illuminator/Classes" ARCHIVE="illum8.zip" MAYSCRIPT>
          <PARAM NAME="QueryTemplate" VALUE="Demo_Graphic/xcute">
     </APPLET>
     <img src="/XMII/CM/Demo_Graphic/test.png" >
4. I see the picture but it does not update the status. (it was old picture). But If I see the picture directly in Workbench it has the new value
any idea?
Edited by: Seng Kiang Hoe on Sep 24, 2010 11:03 AM

Inline SVG files (even very small ones) make FF19 freeze and crash

every time I open this page http://mincovlaw.com/interest/calculate (or many others that contain an SVG object), FF19 freezes on me under Win7.
This is how the SVG is embedded:
<object data="/images/logo/logoblack.svg" type="image/svg+xml" style='width:300px; height:40px;margin-bottom:15px;' alt="MINCOV LAW CORPORATION - Outside The Box Legal Solutions" title="MINCOV LAW CORPORATION - Outside The Box Legal Solutions"></object>
Is there a way to fix this?

I downgraded to FF18.0.2 and it looks like the problem went away.
The reason I want to have this as a large svg is because this page gets printed out a lot, so I want it to look sharp.

Missing image in SVG

Hello,
I did SVG object with inserted image. I imported this SVG and image to xMII and tested.
All was correct. But when i tried to do animation object with this SVG, i got screen without image. I think it because in the SVG code there is incorrect xlink. Could somebody tell me correct xlink?
Does xMII 12 support it?
Thank in advance.

Hello all,
I also have the same kind of problem, i.e. when I put the image tag with some image path in svg file, then I am able to see the image in svg. Please have a look on the following simple svg:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
         width="400" height="300"
         viewBox="0 0 200 200" text-rendering="geometricPrecision" >
     <rect id="chkRect1" x="10" y="10" width="100" height="30" style="fill:white;stroke:black" />
     <text id="text1" fill="rgb(0,64,0)" text-anchor="middle" x="40" y="100" >ABC </text>
     <image id="img1" x="45" y="10" width="200" height="180" xlink:href="C:\Lighthammer\Xacute\idea300.gif" />
</svg>
But when I put the same svg file in the following path "C:\Lighthammer\Xacute\SVGObjects\" and try to see it from Dynamic Graphics, then I am not able to see the image in xMII.
Please help me out in letting me know about the problem.
Thanks

Svg - 3D dial

Hi all,
There is a std svg object - 3d dial (speedometer) that xMII provides. Its has 3 arcs / sectors with different colors (red, green, yellow).
I am able to translate and rotate these arcs about the centre by manipulating these properties in xMII
Question: I would also like to increase/decrease the length of these arc.
1) Is there a property already existing in this svg that would allow me to do it
2) Else, how do I add this property which would enable me to do this?
I would like to use this same std xMII image.
Appreciate any ideas

SVG is not proprietary to xMII, therefore I would recommend checking google or other sources like <a href="http://www.w3schools.com/svg/svg_circle.asp">w3schools</a> to find more factual information on creating/modifying SVG images. Best of luck.

Problems HTMLViewer with SVG/JavaScript content

Hello, I have a customer who displays a SVG object in a HTML viewer(SapGui620/4.6C Sap), this is build up with extensive JavaScripting (..) -> sometimes errors occur, most likely this is because of synchronuous errors, after F5 (refresh) the HTML builds up nicely (almost allways).
The questiosn I have concerns the architecture of the HTMLViewer -> is it so that the Abap Object(proxy) communicates with a Com (activeX) object of SAP which in his turns calls the MS ActiveX object ? Or does the Sap Activex makes calls to dll's or so?
Are there any known restrictions in the HTMLViewer that does not exsist in the browser itself? ( IE 5.5).
Off course i advised to use different technique for building up this page in stead of JavaScript (BSP)
Any help appriciated,
Greetings, Robin Fillerup.

Hello Martin,
which version of IE do you use? If it is a newer version, you can try to attach a debugger to it.
You can use the F12-Developers tools to do so:
Debugging IE 10
© 2015 Thomas Roskop
Germany // Deutschland

SVG Objects

Similar Messages

Maybe you are looking for