[FileMaker] 버튼 아이콘을 SVG 형식으로 자체 제작

작년의 캘린더에 처음 참가했습니다.
성 징계도 없고, 어디에 수요가 있는지 모르는 작은 재료를 투하합니다

FileMaker 버튼 아이콘

FileMaker 14부터 버튼에 아이콘을 설정할 수 있습니다.


디폴트로 준비되어 있는 아이콘도 있습니다만, 스스로 좋아하는 아이콘을 사용하고 싶은 경우는, 좌하의 + 플러스 버튼으로부터 아이콘 파일을 등록할 수 있습니다.


등록할 수 있는 것이 PNG 형식 또는 SVG 형식의 2 종류.
PNG 형식은 간단합니다만, 아이콘의 크기나 색을 바꾸는 등이 효과가 없기 때문에, 레이아웃 만들 때에 조금 아쉬움을 느낍니다.
SVG 형식이라면, 그러한 변경도 자유자재로 할 수 있으므로, 화상 작성의 소프트를 사용하지 않고 만들 수 없는 것인가라고 시행착오해 보았습니다.

Icon Manager

h tp // w w. 이다 ts. 이 m/K의 w㎇d
무료이므로 마음대로 소개해 버리고 있습니다만, 미국은 솔트 레이크 시티의 InDats사의 사이트에 있는 이쪽의 툴을 우선은 묵묵히 다운로드.
이제 이것만으로 부족할지도 모릅니다.
많은 SVG 아이콘을 FileMaker에 최적화된 형태로 사용할 수 있습니다.
InDats, 좋은 도구를 공개해 주셔서 감사합니다.

무료 SVG 아이콘 소재

SVG 아이콘 무료로 검색하면 자료를 얻을 수 있는 몇 가지 사이트가 나옵니다.
SVG 형식의 파일을 텍스트 편집기 등으로 열면 이런 느낌.


어쩐지 두통이 될 것 같은 문자의 열이 가득합니다.
이 파일을 FileMaker에 등록하면 부족할 것입니다만, 읽을 수 없거나, 확대·축소나 색 변경을 할 수 없는 경우가 있으므로, FileMaker용으로 최적화한 SVG 파일로 변환해 줍니다.

방금 전의 Icon Maneger 쪽에 등록해 갑니다.

Utility_Icon이라는 레이아웃으로 이동하여 레코드 작성으로 추가합니다.
PathData 필드에 텍스트 편집기에서 열린 SVG의 path의 d 값을 복사합니다.
<path class="st0" d="hoge hoge">path가 여러 개 있으면 첫 번째 path에서 마지막 path의 "까지 통째로 복사하면 잘 작동합니다.



Generated_SVG의 필드에 자동 계산으로 값이 포함됩니다.
오른쪽 상단의 X, Y, Width, Height 필드도 같은 방식으로 설정합니다.
대체로 처음으로 정의됩니다.
viewBox="0 0 512 512"
오른쪽에서 순서대로 넣습니다.


왼쪽 상단 미리보기에 아이콘이 표시되었습니다!
그리고 Name과 Tags에 적절한 값을 넣어두면 Icon Manager에 등록이 완료됩니다.
Favorite의 플래그를 세우면 나중에 함께 내보내기 쉽습니다.

마찬가지로 이미지 데이터에서도 변환 도구 등으로 SVG 형식으로 변환하여 경로 값을 취하여 이것으로 아이콘화할 수 있습니다.

일부러 이런 귀찮은 일 하지 않아도・・・라고도 생각합니다만
이미지 데이터를 레이아웃에 붙여 넣는 것보다 SVG 아이콘이 표시도 빠르거나 좋을까? 라는 창백한 기대에서 자주 사용하는 이미지는 아이콘화하고 있습니다.
다만 효과 검증은 하지 않습니다. 완전히 자기 만의 세계입니다. . .