# Control SVG

Se trata de un objeto con el que podremos crear controles tipo botón, interruptor, etc. para su posterior uso en [formularios](https://doc.velneo.com/velneo-vdevelop/buenas-practicas-de-programacion/buenas-practicas-de-rendimiento/formularios). Este objeto estará compuesto por varias [imágenes Svg ](https://doc.velneo.com/velneo-vdevelop/proyectos-objetos-y-editores/proyecto-de-aplicacion/formulario/controles-de-visualizacion/imagen-svg-control)(gráficos vectoriales), cada una de las cuales se corresponderá con un estado del control. Para crear un objeto de este tipo seleccionar la opción **nuevo objeto/control svg** del menú **objetos** de Velneo vDevelop o a través de la galería de objetos.

## Propiedades

### Identificador

Etiqueta alfanumérica que identifica de forma unívoca al objeto dentro del proyecto. Este identificador será el que usemos para referenciarlo en otras propiedades de otros objetos.

El **identificador** constará de mayúsculas y números exclusivamente. Al identificar de forma unívoca un objeto no puede haber duplicidad.

### Nombre

Etiqueta alfanumérica que servirá como descriptor del objeto. Se usará para presentar información del objeto en otros objetos y en los [inspectores.](https://doc.velneo.com/velneo-vdevelop/inspectores)

Podemos definir una etiqueta por cada idioma presente en el [proyecto.](https://doc.velneo.com/velneo-vdevelop/proyectos-objetos-y-editores)

### Estilos

#### **Privado**

Limita el acceso del usuario final al objeto desde puntos donde no se haya programado el acceso al mismo.

#### **Personalizable**

Si activamos este estilo, el objeto podrá ser reemplazado por otro del mismo tipo en tiempo de ejecución mediante un objeto [reemplazo](https://doc.velneo.com/velneo-vdevelop/proyectos-objetos-y-editores/proyecto-de-aplicacion/reemplazo).

### Comentarios

Esta propiedad nos permite documentar el uso del objeto.

### Tipo de control

Esta propiedad nos permite definir el tipo de control que conformará el objeto. Los valores posibles son:

### Botón Svg

Permite crear un control gráfico de tipo botón. Al seleccionarlo se activarán tres nuevas propiedades, que son:

### SVG 1

En esta propiedad tendremos que seleccionar un objeto imagen Svg incluido en el proyecto o en proyectos heredados, que se corresponda con el estado **normal** del botón.

![](https://content.gitbook.com/content/hGRTr5J3e6YsZ6MYIEDz/blobs/8Y82YBpIWVNpK718URyN/res_1722.jpg)

### SVG 2

En esta propiedad tendremos que seleccionar un objeto imagen Svg incluido en el proyecto o en proyectos heredados, que se corresponda con el estado **pulsado** del botón.

![](https://content.gitbook.com/content/hGRTr5J3e6YsZ6MYIEDz/blobs/Rx9i9FPDberlfsnJ46K7/res_1723.jpg)

### SVG 3

En esta propiedad tendremos que seleccionar un objeto imagen Svg incluido en el proyecto o en proyectos heredados, que se corresponda con el estado del botón cuando el cursor del ratón pase por encima del mismo (**mouseover**).

![](https://content.gitbook.com/content/hGRTr5J3e6YsZ6MYIEDz/blobs/JPYuGST0omyokx9owtXy/res_1724.jpg)

### Interruptor Svg

Permite crear un control gráfico de tipo interruptor. Al seleccionarlo se activarán dos nuevas propiedades, que son:

### SVG 1

En esta propiedad tendremos que seleccionar un objeto imagen Svg incluido en el proyecto o en proyectos heredados, que se corresponda con el estado **apagado/off** del interruptor.

![](https://content.gitbook.com/content/hGRTr5J3e6YsZ6MYIEDz/blobs/ryRk3exaxGkQNULmwo8Q/res_1725.jpg)

### SVG 2

En esta propiedad tendremos que seleccionar un objeto imagen Svg incluido en el proyecto o en proyectos heredados, que se corresponda con el estado **encendido/on** del interruptor.

![](https://content.gitbook.com/content/hGRTr5J3e6YsZ6MYIEDz/blobs/rYHHjiPwjW6cDVPbWGzT/res_1726.jpg)

### Switch Svg

Permite crear un control gráfico de tipo interruptor-deslizador.

![](https://content.gitbook.com/content/hGRTr5J3e6YsZ6MYIEDz/blobs/ONJlacrPElLXwEfbFEu2/res_1731.jpg)

Al seleccionarlo se activarán cuatro nuevas propiedades, que son:

### SVG 1

En esta propiedad tendremos que seleccionar un objeto imagen Svg incluido en el proyecto o en proyectos heredados, que se corresponda con el **fondo** del interruptor-deslizador.

![](https://content.gitbook.com/content/hGRTr5J3e6YsZ6MYIEDz/blobs/HieHN1vEyOyjWTvraiYg/res_1727.jpg)

### SVG 2

En esta propiedad tendremos que seleccionar un objeto imagen Svg incluido en el proyecto o en proyectos heredados, que se corresponda con el fondo del interruptor-deslizador cuando el cursor del ratón pase por encima del mismo (**mouseover**).

![](https://content.gitbook.com/content/hGRTr5J3e6YsZ6MYIEDz/blobs/vTtzaAZ7EMCOtRHghVsY/res_1728.jpg)

### SVG 3

En esta propiedad tendremos que seleccionar un objeto imagen Svg incluido en el proyecto o en proyectos heredados, que se corresponda con el estado **apagado/off** del interruptor-deslizador.

![](https://content.gitbook.com/content/hGRTr5J3e6YsZ6MYIEDz/blobs/JCDO0KbtwjFYcnkP1Fq2/res_1729.jpg)

### SVG 4

En esta propiedad tendremos que seleccionar un objeto imagen Svg incluido en el proyecto o en proyectos heredados, que se corresponda con el estado **encendido/on** del interruptor-deslizador.

![](https://content.gitbook.com/content/hGRTr5J3e6YsZ6MYIEDz/blobs/tlUTbQECYPfJUUjMhoti/res_1730.jpg)

### Reloj indicador Svg

Permite crear un control gráfico de tipo reloj indicador.

![](https://content.gitbook.com/content/hGRTr5J3e6YsZ6MYIEDz/blobs/flEtK9QtsDGsZabF87ED/res_1732.jpg)

Al seleccionarlo se activarán las siguientes propiedades:

### SVG 1

En esta propiedad tendremos que seleccionar un objeto imagen Svg incluido en el proyecto o en proyectos heredados, que se corresponda con el **fondo** del reloj indicador.

![](https://content.gitbook.com/content/hGRTr5J3e6YsZ6MYIEDz/blobs/jE12G8G6tQhF3ms6UaUB/res_1733.jpg)

### SVG 2

En esta propiedad tendremos que seleccionar un objeto imagen Svg incluido en el proyecto o en proyectos heredados, que se corresponda con la **sombra de la aguja** del reloj indicador.

![](https://content.gitbook.com/content/hGRTr5J3e6YsZ6MYIEDz/blobs/QRunIwO3clegBmiXMKEl/res_1734.jpg)

### SVG 3

En esta propiedad tendremos que seleccionar un objeto imagen Svg incluido en el proyecto o en proyectos heredados, que se corresponda con la **aguja** del reloj indicador.

![](https://content.gitbook.com/content/hGRTr5J3e6YsZ6MYIEDz/blobs/Qr4Gb7O3eDW42fGYzC9c/res_1735.jpg)

### SVG 4

En esta propiedad tendremos que seleccionar un objeto imagen Svg incluido en el proyecto o en proyectos heredados, que se corresponda con la **capa de superposición** del reloj indicador.

![](https://content.gitbook.com/content/hGRTr5J3e6YsZ6MYIEDz/blobs/GekHExyNsyc2q25PVI9n/res_1736.jpg)

### Origen x y Origen y

Coordenadas del punto de anclaje de la aguja.

### Mínimo y Máximo

Valores mínimo y máximo que contemplará el control.

### Ángulo inicio y Ángulo final

Ángulos inicial y final de la aguja del reloj indicador.
