5 Replies Latest reply on Feb 21, 2010 3:25 AM by Jacob Bugge

    Converting Bitmap to SVG with Illustrator

    hemelix

      Hi,

      Totally new to use Illustrator. Would be nice if I can do the folowing with Illustrator Cs4.

      I downloded trail verion (have no money really -).

      I would like to convert bitmap to svg tiny for mobile device. It looks if I save it as SVG tiny it can do it. But problem is with transparency.

      Let's say I have a circle image  in bitmap and if I save it as svg and use it in mobile application then the 4 corners are visible as square (as seen as white in my case). Any idea how can I make it transparent?

       

       

      br,

      Mahbub

        • 1. Re: Converting Bitmap to SVG with Illustrator
          Jacob Bugge MVP & Adobe Community Professional

          Mahbub,

           

          This is what a Helpfile (old one) says about the SVG format in a format comparison:

           

          Traditional image formats--GIF, JPEG, and PNG--are bitmap formats that describe  images, using a grid of pixels. The resulting files tend to be bulky, limited to  a single (often low) resolution, and consume large amounts of bandwidth on the  Web. SVG, or Scalable Vector Graphics, on the other hand, is a vector format  that describes images as shapes, paths, text, and filter effects. The resulting  files are compact and provide high-quality graphics on the Web, in print, and  even on resource-constrained, handheld devices. Users can magnify their view of  an SVG image on-screen without sacrificing sharpness, detail, or clarity. In  addition, SVG provides superior support for text and colors, which ensures that  users will see images as they appear on your Illustrator artboard.

           

          Illy, like SVG, is basically about vector, not raster/bitmap.

           

          All this means that you need vector artwork in order to enable scaling, which you may not need.

           

          But the corner issue seems to be related to bitmap images basically being rectangular. Some bitmap formats, such as PNG and GIF can have transparent parts, such as the areas forming the outside parts that should be invisible, such as  corner parts at roundings. You may seemingly cut parts of bitmap image shapes in Illy (by making parts transparent), using Clipping Masks; there may be easier ways in CS4. Some may suggest your using Photoshop for such tasks.

          • 2. Re: Converting Bitmap to SVG with Illustrator
            hemelix Level 1

            Hi Jacob,

             

            Thanks for quick and helpful answer,

            It would be really very much helpful to me if you can tell me how can I use clipping mask in any tools like CS4 or photoshop  or windows bitmap edition.

             

            -Mahbub

            • 3. Re: Converting Bitmap to SVG with Illustrator
              Jacob Bugge MVP & Adobe Community Professional

              Mahbub,

               

              You may, preferably with the image placed suitably (which could be with its centre at X = Y = 0, you may insert the values inthe Transform panel):

               

              1) With the image locked (you may do that by clicking beside the eye in the Layers panel to get a lock), create a stroke/no fill (set that at the bottom of the Toolbox) path with a shape corresponding to the part of the image you want to have visible; that may be a simple shape such as a circle which you may create using the Ellipse Tool (flyout from the Rectangle Tool in the Toolbox) and place it as desired over the image;

              2) Unlock the image, select both, and Object>Clipping Mask>Make.

               

              Now you should have an object with transparent parts outside the path. If you cut more than just corners, you may wish to reduce the size of the selectable artwork; in that case you may, with the Clipping Mask still selected:

               

              3) In the Transparency panel dropdown, choose anything but Normal;

              4) Object>Flatten Transparency (just leave the default values in the dialog).

               

              This should remove the invisible parts outside the Bounding Box of the path used to clip.

               

              You may look up the terms in the Helpfile.

              • 4. Re: Converting Bitmap to SVG with Illustrator
                hemelix Level 1

                Hi Jacob,

                Extremely sorry, I have very very limited experience about graphics.

                Are we talking about CS4 or photoshop?

                 

                Br,

                Mahbub

                • 5. Re: Converting Bitmap to SVG with Illustrator
                  Jacob Bugge MVP & Adobe Community Professional

                  Mahbub,

                   

                  We are talking Illustrator CS4 (Photoshop CS4 being its counterpart in the suite(s)).