Add an image to a project

Add an image to the
Images
folder of the project to be able to add the image to a screen.
To add an image to a project
  1. In the
    Project Explorer
    , expand the
    Assets
    folder, right-click the
    Images
    folder, and click
    New Images
    .
  2. Browse to and select one or more image files.
    The image appears alphabetically in the
    Images
    folder and becomes part of the project. The folder displays images as icons.
    TIP:
    Tips:
    • Image files must be in BMP, JPG, PNG or SVG format, and have a resolution that is no larger than 6 MP.
    • For best screen and popup performance, use images optimized for size.
    • The HMI application includes an image cache that shortens the time to load the most frequently used images.
    • Supported SVG files include Tiny 1.1 SVG files and Tiny 1.2 SVG files.
    • Adding an image that begins with a numeric character pre-pends "FILE" at the beginning of the image name. For example, 1Tank.img appears as FILE1Tank.img in the
      Images
      folder.
  3. To view the image filename, type, and size, click the image in the
    Images
    folder and expand the
    General
    category in the
    Properties
    window.
    TIP:
    Tips:
    Browsing to a new image in the
    Select Image
     dialog box adds the image to the
    Images
     folder of the
    Project Explorer
    .
    View Designer
     does not support the following within the SVG image definition:
    • Scripting
    • Animation
    • Units of %, pica, or cm
    • Linked images
    To ensure the Image graphic element displays the SVG image, when creating an SVG file:
    • Use Adobe Illustrator CS6 to create the image and save it as an SVG type.
    • In the
      SVG Options
      dialog box, complete:
      • SVG Profiles
        . Select SVG Tiny 1.2 Location. Select
        Embed
        .
      • Fonts Type
        . If including text in the SVG image, select Convert to outline.
        Rockwell Automation
         recommends that you do not include text in an SVG image.
Provide Feedback
Have questions or feedback about this documentation? Please submit your feedback here.
Normal