Saving an SVG with opacity

I'm surprised I can't seem to find more people asking about this, maybe I've missed it:
Is there no way to export semi-transparent shapes as SVG without rasterizing them in Illustrator? The SVG format includes both opacity, fill-opacity and stroke-opacity attributes, but a simple vector shape set to, say, 50% opacity always gives me a "Transparent artwork is rasterized" message when trying to save as SVG. This basically exports the shape as a base64 bitmap within the SVG file, rather than simply giving it opacity="0.5".
Am I missing something? Anyone have a clever workaround for it? It seems bizarre that such a basic attribute can't be exported directly.

Ah, I appear to have worked it out – decided to have another go at it since clearly it was something at my end. It doesn't rasterize transparent shapes if I save as SVG 1.1 rather than 1.2 Tiny. I thought I had already tried 1.1, but I must have clicked the wrong option by accident.
Still, according to this 1.2 Tiny should also support opacity:
Rendering Model – SVG Tiny 1.2
I guess it was only ever a W3C recommendation, but still seems weird not to support opacity. But for most of my purposes it doesn't matter if I save as 1.1 so at least it's solved the issue for now.
Thanks for your input!

Similar Messages

  • Saving an SVG with Illustrator CC Not Working

    I am attempting to save an SVG with the new version of Illustrator (Creative Cloud) and it's not working. It seems the code that's output is quite different than that of the old version.
    Just to give you a bit of a background on my project, I'm adding a new icon to an existing AI sprite file.
    I hacked a solution to the problem by pasting the new bit of code for the new icon from the creative cloud-generated svg into the old CS6 file, and added fill color code to three different places in the new icon code to set the icon color - it was showing up as black and should have been white (it is white in the AI file).
    I tried saving the SVG many different ways to no avail - how I can properly save the svg file directly from Illustrator CC? Why isn't it working the same way it did in the previous version?
    Any advice is appreciated! Thanks!

    Another thing to note - I was advised previously to check the "Preserve Illustrator Editing Capabilities" checkbox, but that did not work for me. I have tried a number of different SVG settings and nothing seems to work.

  • Save as SVG, with character styles included as CSS classes? (CC)

    Hi, I know that
    a) Character styles in Illustrator CC are saved as CSS classes in the CSS properties menu, with appropriate style info;
    b) These classes can be exported to a CSS file from the CSS properties manual;
    c) Graphic styles can also be saved as CSS classes; but
    d) When saving to SVG (with Style Elements option) the graphic style classes are included in the SVG code, but NOT the character style classes. Instead, it uses classes like ".st0", ".st1", etc., which separate each styled attribute (font-family, size, etc.) into its own class.
    Is there any way around this problem, short of extensively editing the svg code by hand later? The end result we're looking for is an SVG where text has classes assigned, based on character styles.  (Ideally we'd then link to an external style sheet in order to modify based on the end use of the SVG. So for example a graphic with .textBold and .textRegular, where those classes are later assigned different values based on the delivery device.)
    Has anyone else dealt with this issue?
    Thanks!

    Hi Ianmcarey,
    Thanks for the detailed Explanation. We will investigate this Requirement of Exporting Character style classes in the SVG code.
    Thanks and Regards,
    Mohit Gupta.

  • Problem Saving PDF with Opacity Masks in Illustrator CS3

    I'm having trouble exporting an Illlustrator CS3 file to PDF. I have two layers in the the .ai file that have opacity masks applied. When I save the file as a PDF, the two layers with opacity masks seem to disappear (or they are flattened down to white/100% transparency.) They do not show on screen nor when printing. I've tried opening the saved PDF in Illustrator to investigate, and the layers are still there, but with no opacity mask. Where am I going wrong? I've tried a new file with a simple shape and a simple opacity mask, and it exports fine to PDF. So something is wrong with my file set up, but I can't pinpoint what! I have also tried exporting to various versions of PDF, and nothing works. Help!
    Screen cap from Illustrator:
    Screen cap of PDF:
    Correct (Illustrator) with subtle starburst effect:
    Wrong (Acrobat PDf), no starburst!
    Thanks for looking!

    Not sure what's going on in your file, but it's definately having a problem with the Steaks layer. Trying to release the clipping mask and ungrouping all the layers is having a problem so it might have something to do with the way the streaks layer was built.
    Using your file I replaced the streaks layer and put a starburst that's clipped to the icon shape. I've attached two files. One is for Illustrator CC so you can retain the gradient fill on the stroke which is only available in newer versions of Illustrator. The other has the starburst I created expanded so that you can open the file and retain the startburst look.
    CC
    https://dl.dropboxusercontent.com/u/37256756/Go-IconCC.ai
    CS3
    https://dl.dropboxusercontent.com/u/37256756/Go-IconCS3.ai

  • Problems saving/exporting with Opacity Mask in Illustrator CS6

    Hi, I'm very new to illustrator and self taught. I'm having issues exporting a file with opacity masks to PDF. I have a file with three layers, each with a opacity mask. When I save the file as a PDF, the opacity masks seem to disappear (or they are flattened). I've tried creating a new document and creating it again with no luck. Where am I going wrong? I just want it to look like it does in Illustrator when its exported! Heres the file: Dropbox - BB Logo.ai
    Ideally I'd like to export it to a JPEG or PNG whilst maintaining the opacity masks to give the logo texture. Any suggestions?
    I appreciate any help! Thanks
    Its a little hard to see but heres an Illustrator screenshot:
    PDF screenshot:
    Thanks for looking!!

    You'll need to outline the text and provide the mask image.
    Apart from that: looks to me like a problem with resolution. There's a structure in your exported file, but it's smoothed.
    Without knowing what exactly you did step by step it's difficult to solve this problem.

  • How do I transfer a .psd file to illustrator that can then be placed in Muse as a .svg with transparent background?

    I just wrote all this up in another thread.  I did not realize at the time that the last post was in 2014, so I'm giving it a go here.
    I am currently trying to create an .svg using Photoshop .psd file (with layers in tact).  I'm new to these products so it may be obvious to others that the above intention was to eventually place the .svg in some sort of website creation software such as Muse.  Which is precisely what I am attempting. However, I am getting a white background once I place or copy and paste into Muse.  My starting .psd has a transparent background without any hidden layers causing this problem.  To test this I placed the .psd file into Muse and it still has a transparent background.  However when opening or placing this file into illustrator, it picks up a white background. If I do exactly as described above, I still get the same result.  So far I have tried:
    1) Simple copy and paste from Photoshop .svg to illustrator to Muse.  Result - white background.
    2) Placing the .psd in illustrator, then placing the .svg file in muse.  Result - white background.
    4) I have also tried the every combination of 1 and 2. - Result - white background.
    3) I have now created a path in Photoshop from the text layer to yet again attempt the above methods.  Result - white background.
    I'm including an image of the object I am trying to place with transparent background, but I have both a flattened rasterized version, a version complete with layers and a third (.svg) with the corresponding objects.  I am completely new to Illustrator as of today so any help would be greatly appreciated.  Thanks.
    Link to .psd file "Welcome text"

    I was having some difficulties getting the correct dimensions of one of my objects, I eventually solved this problem without using svg.  It was pretty simple when I stopped trying to over complicate things.  I just linked the object to a near by object in photoshop, merged and placed it all as one.  It looks great now.  Thanks for your reply.  You are correct, SVG was not the answer.

  • SVG with PNG fallback, Responsive, EDGE Reflow & Animate integration

    I mentioned this on the Muse Facebook, and they said I should post it here... I think Muse is an awesome program. But I really, really would love to see these features. Any of them good enough to make it to the sketching table?
    1. SVG with PNG fallback support (for Retina displays)
    The problem with Hi-Res displays on Tablets, phones and laptops is that the web is becoming awfully ugly. You need to zoom to fit webpages, and when they fit, the JPG's and PNG's become blurry. Since displays are increasing resolution year after year and pixel density is becoming a real issue, on phones (like the HTC One) or laptops (Macbook Retina or Chromebook Pixel).
    Wouldn't it be great if we could use vector SVG for new devices for sharp a crisply logo's on every screen. And with that instantly use an automatic PNG-fallback option for older browsers. This would signifantly upgrade any website made with Adobe Muse and the Web in general if you ask me! I've done some research and I found this website very useful considering this issue: http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/
    2. Responsiveness (Adobe EDGE reflow integration)
    Adobe Reflow is amazingly promising. What if (instead of making different websites for every device) you can export a website to Adobe Reflow to make the design instantly responsive.
    3. Beter Adobe EDGE Animate integration
    EDGE Animate is a great program, especially with the codes and actions which you cna integrate. The only problem is sometimes I want an animation to start playing when I'm at that part of the page, not after when it's done loading. Overall the integration is so-so, and it's doable to add an animation to Muse, but these tweaks could upgrade it from great, so turbo-awesome!
    Which brings me to my next point:
    4. Dynamic Content Loading (Load on view)
    Isn't Muse a great tool for making one-pages?! I love it for that, and I do love one-pages. The problem is that it can take a while to load when it's becoming more complex. Is there a possibility to add a feature when thing are loaded when you scroll? Which is fairly often used on blogs and stuff.
    5. Horizontal Parralax Scrolling
    Since the latest update I've been pretty hooked on the functions of parralax scrolling and what it could do in a usefull way. The problem is that it doensn't work for horizontal scrolling. The objects can move horizontal (when scrolling vertical). But there's no option to add an effect when scrolling in a horizontal direction.
    What do you think? Any of these interesting enough to develop?

    I would love all of the features in this post. But you must post it in the Idea section of the forum so people can vote for your ideas.

  • Use SVGAnimator to display a SVG with xlink PNG image

    I tried the M2GDemo and it works without this image part
    SVGAnimator animator =
    SVGAnimator.createAnimator( image );
    // add our custom event listener
    animator.setSVGEventListener(
    new CustomEventListener( image, animator ) );
    // get the Canvas for this player: requires a cast
    Canvas canvas = (Canvas) animator.getTargetComponent();
    I modify the requestResource a bit to get Image from root1.
    public void requestResource(ScalableImage inImage, String inURI)
         int pos = inURI.indexOf(":");
         if (pos >0){
              inURI = inURI.substring(pos);
         inURI = "file:///root1/"+inURI;
    try
    Connector.openInputStream(inURI);
    catch ( IOException ioe )
    ioe.printStackTrace();
    <image x='90.0' y='69.46001' width='222.7' height='152.25' xlink:href='myImage.png'/>
    Now I stuck with the error below.
    Using Pisces Renderer (native version)
    loadStarting : true
    loadComplete : true
    loadingFailed: false
    loadStarting : true
    loadComplete : true
    loadingFailed: falsejava.lang.ArrayIndexOutOfBoundsException
         at com.sun.perseus.model.Text.applyXMLSpaceDefault(+86)
         at com.sun.perseus.model.Text.applyXMLSpace(+37)
         at com.sun.perseus.model.Text.layoutText(+70)
         at com.sun.perseus.model.Text.checkLayout(+13)
         at com.sun.perseus.model.Text.paint(+12)
         at com.sun.perseus.model.ModelNode.paint(+9)
         at com.sun.perseus.model.StructureNode.paint(+16)
         at com.sun.perseus.model.ModelNode.paint(+9)
         at com.sun.perseus.model.StructureNode.paint(+16)
         at com.sun.perseus.model.ModelNode.paint(+9)
         at com.sun.perseus.model.DocumentNode.paint(+16)
         at com.sun.perseus.model.SimpleCanvasManager.fullPaint(+108)
         at com.sun.perseus.model.SimpleCanvasManager.updateCanvas(+18)
         at com.sun.perseus.midp.SVGCanvas$1.run(+87)
         at com.sun.perseus.util.RunnableQueue.run(+271)
    RunnableQueue terminatingUncaught exception java/lang/ArrayIndexOutOfBoundsException.
    Bascially all I need is a viewer to display SVG with xlink to PNG image without the use or tinyline. If I want to get the PNG image from http, what should I do?
    Any response will be greatly appreciated.

    > This technique is really just using a BEE, there is
    > documentation on the BEE concept in the online help
    > and Brian McKellar has a weblog on the subject as
    > well.
    OK, I think I get the idea. Will check the stuff. Thanks.
    > Notice the strange D at the end of the line. This
    > isn't in the original posting. Perhaps this is just
    > bad cut and paste.
    Just bad copy paste. Yes.
    > You say that this isn't working for you - but you
    > don't describe the results. Is there an error?  Does
    > it render anything in the button at all?  Does the
    > raw HTML get rendered?
    I just saw coding in the button.
    > You want to make sure that the
    > text doesn't get encoded - which would cause the HTML
    > source to display instead. On the htmlb:button you
    > will want to set the attribute encode = FALSE.
    OK, that was right on spot. This shows me the Icon! Strike!
    > Also I am not sure that you can also pass in text
    > with the image like that.  You might have to create a
    > full BEE and add the image and a textView separately
    > into the BEE.  Then render the entire BEE to a string.
    I'll check the documentation on BEE and give it a try.
    Thanks for your answer.
    Thats a starting point for me.
    Alf

  • I just upgraded iMac to 10.6.8 and now saved items open with "Color-Sync Utility". How can I change it back to preview?

    I just upgraded to 10.6.8 and my saved files open with "Color-Sync Utility". How can I change it back to Preview?

    Select a document in the Finder, choose Get Info from the File menu, click on Open With, select the desired application, and press the Change All button.
    (80944)

  • Saving as SVG (w/out AI editability) changes artboard size ...why?

    Saving as SVG (w/out AI editability) changes artboard size ...why? ai saves the artboard dimensions as the frame, unless it decides to expand the frame to accommodate extraneous material. what is weird and disappointing is that ai does not read these frame values back in to recreate the artboard; you have to use preserve ai capability which attaches huge code. How to get it to retain the chosen artboard size?  Thanks, Rich.

    I have the same problem. When I save as AI and reopen it the graphics are crisp and align to the pixel grid. When I save as SVG and reopen it the graphics are no longer crisp and no longer align to the pixel grid. It looks like the artboard shifts .5 pixels right and down. That's just odd.
    Here's the screenshots (sorry 144dpi).
    AI File:
    SVG file: (do you see the .5 pixel shift?)
    This really concerned me because I am designing SVG's for the web - so they would look crisp on the pixel grid. I tested the SVG in html and it looked crisp on 72dpi and 144dpi displays. So the problem is only how Illustrator imports the SVG, which is very weird. Any thoughts why this happens?
    Also, i'm using Illustrator CS6.

  • How to import/paste Illustrator-objects with opacity-effects?

    Hi all!
    I can't get FW CS4 to import or paste Illustrator objects
    with opacity-effects such as Multiply?
    The objects gets flattened and all effects are gone!
    Please help!
    TIA!
    /H

    henriko75 wrote:
    > Hi all!
    >
    > I can't get FW CS4 to import or paste Illustrator
    objects with
    > opacity-effects such as Multiply? The objects gets
    flattened and all
    > effects are gone!
    Why not apply them in Fireworks?
    Linda Rathgeber - Adobe Community Expert
    http://www.adobe.com/communities/experts/members/8.html

  • Saving a file with Dreamweaver it doesn't show up finder view of folder

    Since I updated Mac Leopard it seems that when saving a file with Dreamweaver 8 it shows up in the files list but it doesn't show up in the finder when I look at the same folder.
    But if I save to the desktop the file is visible and if I save to another folder it's visible. Any ideas why?

    Hi harvey waxman;
    It was my understanding that anything prior to DW CS3, which is version 9, is not compatible with Leopard.
    Allan

  • When round tripping with photoshop cc, i get a saved psd file with my original raw,the problem is these are high file sizes and taking a lot of space,can i stop this?

    when round tripping with photoshop cc, i get a saved psd file with my original raw,the problem is these are high file sizes and taking a lot of space,can i stop this?

    That's not the workflow that I use. I have my Lightroom preferences set to create TIF images when going to Photoshop. I keep the original raw file and the TIF image (usually reduced to an 8-bit image) and only export JPEG's when they are needed to send to a lab or to send to someone over the Internet. JPEG files are highly compressed. I only create them when they are needed, and they are discarded as soon as they have been used for their intended purpose. I keep the raw file and the Photoshop-created TIF in my library. This requires extra disk space. But I always have the highest quality files available.

  • Save svg with font-weight:bold rather than a bold font?

    Illustrator is changing the font in my svgs to Arial-BoldMT, which causes it to publish incorrectly (doesn't show up bold).
    When I change the svg code to ArialMT; font-weight:bold, it publishes correctly. Any idea how to have Illustrator save the svgs with the font-weight:bold attribute so I don't have to change it in the code?
    Thanks for your help.

    Out of curiosity may I ask why you are using svg, is this for mobile devices.
    Try uninstalling Arial-BoldMT on your system.
    Also see:
    http://help.adobe.com/en_US/illustrator/cs/using/WS714a382cdf7d304e7e07d0100196cbc5f-6561a .html

  • New Blog Post: Saving Current Values with Cascading LOVs

    All,
    Just blogged on Saving Current Values with Cascading LOVs: http://bit.ly/hQPUPi
    Enjoy!
    Regards,
    Dan

    Monty,
    Glad to hear it's working for you.
    Oh, you just had to go there ;) Popup LOVs are a bit more difficult because the values are not automatically brought back to the page for you. I've already worked out how this could be implemented in my head - but writing it up, of course, is more of an effort. I've added it to my list of blog articles to write on. Since it's not a requirement right now, I'll cover another topic first and come back to that one afterward.
    Regards,
    Dan
    Blog: http://DanielMcGhan.us/
    Work: http://SkillBuilders.com/apex/

Maybe you are looking for