Compartir a través de

Recursos web de imagen

  • Artículo

Use los recursos web de imagen para hacer que las imágenes estén disponibles para su uso en aplicaciones basadas en modelos.

Hay cinco tipos de recursos web de imágenes:

  • Formato PNG
  • Formato JPG
  • Formato GIF
  • Formato ICO (formato de icono de Windows)
  • Formato SVG (Scalable Vector Graphics)

Nota

Los recursos web de formato de vector (SVG) se agregaron con las aplicaciones basadas en modelos.

Capacidades de los recursos web de imagen

Con recursos web de imagen es posible agregar imágenes cuando las necesite. Usos comunes:

  • Iconos de tabla personalizados.
  • Iconos para controles de cinta personalizada y subáreas del SiteMap.
  • Gráficos decorativos para formularios y recursos web de páginas web
  • Imágenes de fondo usadas por recursos web CSS.

Trabajar con Scalable Vector Graphics (SVG)

Use los recursos web de formato de vector (SVG) para cualquier icono que se muestre en la aplicación. Las imágenes vectoriales se definen como Scalable Vector Graphics (SVG), un formato de imagen vectorial basado en XML. Recomendamos usar SVG sobre otros tipos de imágenes como PNG y JPG porque tienen mejor accesibilidad, un tamaño de archivo más pequeño y pueden escalar con su contenedor.

Mejor accesibilidad

Las aplicaciones basadas en modelos pueden controlar el color del icono para evitar problemas de contraste cuando los SVG no contienen valores hexadecimales para los colores. El uso de currentColor puede ayudar a garantizar que se utilicen los colores de tema correctos.

<path fill="currentColor" d="M16,0c-0,0-0-0.0-0-0.0v-0c0-0,0-0.0,0-0.0s0,0.0,0,0.0v0C00,0.0,00,0,00,0z"/>

Tamaño de archivo menor

Los archivos SVG suelen ser más pequeños que las imágenes de tipo rasterizado, como jpg o png.

Escalar con su contenedor

Puede reutilizar un único SVG en lugar de proporcionar varios tamaños de imágenes. Utilice los recursos web SVG en la propiedad EntityMetadata.IconVectorName para definir el icono de una tabla personalizada en lugar de propiedades IconLargeName, IconMediumName o IconSmallName.

Procedimientos recomendados

Asegúrese de que se establezca un tamaño predeterminado a través del elemento svg y los atributos width, height y viewBox.

Siempre que sea posible, elimine los colores de relleno codificados y no utilice hojas de estilo ni clases incrustadas dentro del SVG. Las hojas de estilo integradas podrían filtrar estilos si otros archivos SVG hacen referencia a esa misma clase. Utilice el atributo de estilo para asignar valores en su lugar. Por ejemplo:

<path style="fill:#231F20;" d="M16,0c-0,0-0-0.0-0-0.0v-0c0-0,0-0.0,0-0.0s0,0.0,0,0.0v0C00,0.0,00,0,00,0z"/>

Nota

Los recursos web de formato vectorial (SVG) se tratan como recursos web Script (JScript) y conllevan los mismos riesgos de seguridad que los recursos web JavaScript porque los archivos SVG permiten la incrustación JScript.

Limitaciones de los recursos web de imagen

Como todos los recursos web, los recursos web de imagen usan el contexto de seguridad. Sólo los usuarios con licencia con los privilegios necesarios pueden tener acceso a ellos.

Haga referencia a un recurso web de imagen desde un recurso web de página web

Todos los recursos web pueden usar direcciones URL relativas para hacer referencia unos a otros. En el siguiente ejemplo, para el recurso web de la página web (HTML) new_/content/contentpage.htm que hace referencia al recurso web de imágenes new_/Images/image1.png, agregue el código HTML siguiente a new_/content/contentpage.htm:

<img src="../Images/image1.png" />

Hacer referencia a un recurso web de imagen desde un formulario

Agregar una imagen a un formulario

  1. Vaya hasta el editor de formularios para una tabla.

  2. Seleccione donde desea agregar la imagen en el formulario.

  3. En la pestaña Insertar, seleccione Recurso web.

  4. En la pestaña General, seleccione la imagen del recurso web que desea agregar.

  5. Escriba un nombre para el recurso web. También puede especificar una etiqueta y un texto alternativo.

  6. En la pestaña Formato, puede definir:

    • El número de columnas que las imágenes deben usar.

    • El número de filas que las imágenes deben usar el o si deben expandirse automáticamente para usar el espacio disponible.

    • El tamaño de la imagen con las siguientes opciones:

      • Acercar a la idoneidad
      • Estire a la idoneidad (mantener las relaciones de aspecto)
      • Original
      • Específico,

    • Si selecciona “Específico”, puede especificar el alto y ancho deseados en píxeles.

  7. Seleccione Aceptar.

  8. Debe guardar los cambios y publicar el formulario antes de que los usuarios puedan ver la imagen en el formulario.

Haga referencia a un recurso web de imagen desde un elemento de la cinta de opciones o desde una subárea del mapa del sitio

Use la directiva de $webresource: para especificar una imagen del recurso web que desee utilizar como icono de la cinta de opciones o en la navegación de la aplicación mediante mapa del sitio. El siguiente ejemplo muestra cómo especificar los iconos para un botón de la cinta de opciones.

<Button Id="MyISV.opportunity.form.actions.FlyoutAnchor.Button.1" Image16by16="$webresource:new_/icons/oneIcon16.png" Image32by32="$webresource:new_/icons/oneIcon32.png"/>

Nota

Mediante la directiva de $webresource: se agrega una dependencia de la solución que impide eliminar los recursos web de imagen a los que se hace referencia mientras otro componente de la solución los esté usando.

Vea también

Recursos web
Uso de recursos web de página web (HTML)
Uso de recursos web de hojas de estilo (CSS)
Usar recursos web de JavaScript
Usar recursos web de datos (XML)
Usar recursos web de hoja de estilo (XSL)

Nota

¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)

La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).